validate針對checkbox、radio、select標簽的驗證
阿新 • • 發佈:2017-12-26
成功 blank sele form 賦值 示例代碼 字母 parent appendto
jquery.validate 是jquery的一個插件,用來輔助開發者在客戶端方便快捷的實現表單驗證,最終達到提高用戶體驗的目的。
示例代碼
<form id="formLogin" method="post">
<div>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</div>
<div>
<label for="password">password:</label>
<input type="text" id="password" name="password" />
</div>
<div>
<label for="password1">password1:</label>
<input type="text" id="password1" name="password1" />
</div>
<div>
<label for="sex">sex:</label>
<select id="sex" name="sex">
<option id="sexopt" value="" selected="selected">請選擇</option>
<option id="sexnan" value="1">男</option>
<option id="sexnv" value="2">女</option>
</select>
</div>
<div>
<label for="favorite">level:</label>
<input type="checkbox" id="sport" name="favorite" value="sport" />sport
<input type="checkbox" id="write" name="favorite" value="write" />write
</div>
<div>
<label for="level">level:</label>
<input type="radio" id="one" name="level" value="one" />1
<input type="radio" id="two" name="level" value="two" />2
</div>
<div>
<input id="submit" type="button" value="submit" />
</div>
</form>
@section scripts{
<script type="text/javascript" src="/content/home/index.js"></script>
}
jquery.validate在定位html標簽的時候,默認使用name屬性來獲取標簽,所以需要開發者給需要進行驗證的標簽都加上name屬性,並且賦值。
index.js
$().ready(function () {
$("#formLogin").validate({
rules: {
username: {
required: true
},
password: {
required: true
},
sex: {
required: true
},
level: {
required: true
},
favorite: {
required: true
}
},
messages: {
username: {
required: "please input username"
},
password: {
required: "please input password"
},
sex: {
required: "please select sex"
},
level: {
required: "level requred"
},
favorite: {
required: "favorite required"
}
},
errorPlacement: function (error, element) { //指定錯誤信息位置
if (element.is(‘:radio‘) || element.is(‘:checkbox‘)) { //如果是radio或checkbox
var eid = element.attr(‘name‘); //獲取元素的name屬性
error.appendTo(element.parent()); //將錯誤信息添加當前元素的父結點後面
} else {
error.insertAfter(element);
}
}
});
});
$("#submit").click(function () {
$("#submit").submit();
});
有時候我們需要使用正則表達式對一些輸入進行驗證,比如說郵箱,電話號碼,或者是用戶名必須字母開頭並且長度要在5-30位,等等之類的。
jquery.validate默認沒有提供正則表達式的驗證,但是它提供了一個擴展,我們可以自己添加關於正則表達式的驗證規則。
$(function () {
// 判斷用戶輸入的value是否滿足傳入的正則params的規範
jQuery.validator.addMethod("pattern", function (value, element, params) {
if (!params.test(value)) {
return false;
}
return true;
});
});
這樣我們就可以像下面這樣使用我們自定義的正則表達式驗證了。
$().ready(function () {
$("#formLogin").validate({
rules: {
tel: {
required:true,
pattern: /^[0-9]+$/
}
},
messages: {
tel: {
required:‘tel required‘,
pattern: "regex error"
}
}
});
});
怎麽樣,是不是很酷啊!
$("#formSupplier").validate還有一些其他的參數,跟多的參數可以查看
http://blog.csdn.net/a497785609/article/details/5758613
在這裏先介紹兩個比較常用的。
errorElement
錯誤提示的html標簽
submitHandler
驗證成功之後的操作
$("#formSupplier").validate({
errorElement: "span",
submitHandler: function (form) {
if (btnType == 1) {
submitUpdateSupplier();
} else {
offShelf();
}
},
rules: {
txtSuUserName: {
required: true,
pattern: regexUsername
}
},
messages: {
txtSuUserName: {
required: "請填寫編號!",
pattern: "請註意,編號只能使用3-15位的字母組合!"
}
}
});
validate針對checkbox、radio、select標簽的驗證