饑人谷_李棟
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對象
待續...
