饥人谷_李栋
1.远古时期
2.JS表单验证
3.JQuery表单验证
4.input很多
5.表单验证的思路
一、远古时期
没JS （后端的事情）
执行过程
- 当你写了一个东西之后，通过表单的
action传给server -
server接收到这个post请求之后， - 去读你发送的
username和email - 根据你的邮箱是否合法，再次渲染这个页面
- 把不合法的信息写在下面
- 在该提示的地方，加一行字
- 我们提交表单的时候 会发一个请求
//html
<body>
请提交你的表单信息
<form action="/" method="post">
<div class="row">
<input type="text">
</div>
<div class="row">
<input type="text">
</div>
<div class="row">
<button type="submit">提交</button>
</div>
<div class="output">
{{ error}}
</div>
</body>
//router
.get('/',indexCtrl.index)
.post('/2',indexCtrl.post)
//服务器端
post方法
post:function *(next){
var username=this.request.body.username
var email=this.request.body.email //拿到提交的username 和email
yield this.render('post.hbs',{
username:username
email:email
var error=''
if(email.indexOf('@')){ //如果邮箱里面不含@
error:'邮箱不合法'
}
yield this.render('index.hbs',{ // 渲染 给信息error
error:error
}) // post 一样可以返回页面
yield next;
})
get方法
index:function *(next){ // 用这个方法响应
yield this.render('index.hbs') // 把index渲染出来
yield next;
}
}
二、 JS表单验证
仅仅是email的校验，在客户端就可以做了 --js诞生的一个主>要目的 可以节省服务器带宽
不用提交 就可以知道错了
<script>
var form= document.getElementById('form')
form.addEventListener('submit',function(){//只支持ie
var username=form.username.value
var email=form.email.value
var phone=form.phone.value
var regExpPhone=/^\d+$/g
if(regExpPhone.test(phone)){
alert('手机格式不正确')
e.preventDefault()
return
}
if(email.indexOf('@')<0){
alert('邮箱不合法')
e.preventDefault()// 邮箱不合法的话 阻止默认事件 不跳转
return
}
})
</script>
验证这件事 服务器一定要做
- 如果把源代码改了 /如果用户吧JS禁用了
- 所有从客户端来的消息都可能有问题
- 前端的验证可以被绕过
- 所有有可能被攻击的事情 全部用服务器做
比如金额 不能用JS校验 你要用服务器 看啊可能他账户里面有多少钱
然后 在花钱
三、JQuery表单验证
请求与响应里有
var regPhone=/^\d$/g
if(!regPhone.test(phone)){
alert('error')
return // 如果错误 ，后面就不执行了
}
$.ajax({
type: "POST",
url: xxxx,
data: {
name:name,
phone:phone
},
success: function(response){//返回的字符串/或对象
console.log(response)
if(response.errorCode===0){
var data=response.data
var name=response.name4
var phone=response.phone4//这里的phone4就是服务器定的
alert('提交成功，姓名：'+name+'\n手机：'+phone)
}else{
alert('提交失败')
}
},
error：function(){
alert('服务器出错了！')
},
dataType: dataType
});
</script>
还是用JS验证
jquery没有关于正则、字符串的API
好处：能方便的构造一个post请求
四、input很多的时候
问题：
需要收集说有的input，一个一个的验证
解决方法：
用JQuery找到input，调用他的序列化方法:
$('form').serialize()
验证的规则
var rules={
phone:function(value){
if(value==''){
return false
} else{
return true
}
}
}
var volid=true//整个表单的合法性
$("form").find('input').each(function(index,node){//拿到form 找到说有的input 遍历他们
var name=$(node).attr('name') //node就是input 拿到他的name
var varlue=$(node).val()
var rule=rules[name]// 拿到他的规则 name是phone rule是function,否则是underfined
if (!rule){ //如果rule是underfined
//什么都不做
}else{
if (rule(value==false)) {
valid=false //遍历完了 只要有一个不合法 valid就会变成false
return false //each 里return false在不会继续往下走
};
}
})
五、表单验证的思路
- 确定验证规则和出错信息
- 收集数据
- 对数据进行验证
- 输出最终结果
- 提示出错信息
1.验证规则
比如
手机必须是11位的数字
/^\d{11}$/g
邮箱必须有@
val.indexOf('@')>=0
用户名必须是3-20位
val.length>=3&&val.length<=20
2.收集表单数据
代码：
$('form').find('input,select,textarea').each(function(index,node){
var name=$(node).attr(name) //操作DOM对象 node.getAttribute('name')
var value=$(node).val() //node.value()
})
以上代码问题：
- 对于多个
radio和checkbox(单选框、多选框)有相同的name->为了只选一个类型 - 我们只要选中的
raido、checkbox、select -
input type=“submit”也可能被选中
解决办法:
- 我们遍历的是
input标签，当然会遍历name多遍, 可以先遍历一次 拿到所有不重复的name(所有->去重) - 被选中
radio/checkbox->checked
select->selected //默认选中 - 禁用
disabled //不能选 - 明确input的
type
只取 text radio checkbox hidden password
知识点总结
.和getAttribute区别
获取自带的属性 可以用. 不是自带的可以用getAttribute()
.xx为JS 的状态 getAttribute(xxx) 为DOM的状态 默认情况下 是一致的
find(xxx)
在当前的元素集中，去找他的子元素，子元素只要满足xxx条件，就会被选中，得到一个新的元素集合
xxx可以是css3属性选择器
each(function(index,node){....this/node})遍历
里面的this就是node(DOM对象) ，index当前元素的第几个
input里的type有那些
text radio checkbox hidden button reset password submit
<input type='hidden'>
希望JS用，不想让用户看到的内容 比如JS用来传参 value很长...
<input type='password'>
内容看不见 不能复制
reset
把填的所有内容 清理成初始化的值 ->value属性的值 reset 需要放到form里面
select
里面包option 内容被option标签包裹 选中一个option 网页里的标签字符串不会变(selected不会显示) 但是JS的selected为true 因为 selecte标签没有selected属性
get(0)
由JQuery对象变成DOM对象
待续...
