jquery 驗證演示 基礎_jquery
- WBOY原創
- 2016-05-16 15:34:381111瀏覽
jQuery Validate 外掛程式為表單提供了強大的驗證功能，讓用戶端表單驗證變得更簡單，同時提供了大量的客製化選項，滿足應用程式各種需求。該外掛程式捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫使用者自訂方法的 API。所有的捆綁方法預設使用英語作為錯誤訊息，且已翻譯成其他 37 種語言。
下面透過一段程式碼demo跟大家講解jquery validate ，具體程式碼如下圖：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>
<script type="text/javascript">
$().ready(function() {
var validate= $("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: "密码不能小于{0}个字 符"
},
confirm_password: {
required: "确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
},
//把错误信息放到一处处理与 errorPlacement 函数连用
groups:{
login:"firstname email password confirm_password"
},
errorPlacement:function(error,element){
error.insertBefore("#error_info");
},
//提交表单后焦点在第一个错误表单内
focusInvalid:true,
//指定错误提示的css类名
errorClass:"error_info",
//指定验证通过的css类名
validClass:"success_info",
//验证通过提交表单
submitHandler:function(form){
console.info("提交表单"+$(form).serialize());
},
invalidHandler:function(event,validator){
console.info("表单错误"+validate.numberOfInvalids());
},
// 取消某个元素的校验
ignore:"#firstname",
onfocusout:function(){
return false;
}
});
$("#check").click(function(){
var flag1=$("#signupForm").valid();//检查表单是否有效
var flag2=$("#firstname").rules();//查询元素的校验规则
var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则
var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则
var flag5=validate.form();//验证表单是否有效
var flag6=validate.element("#firstname");//验证表单某个元素是否有效
validate.resetForm();//恢复表单原来的状态
var flag7=validate.numberOfInvalids();//获得错误元素个数
console.info(flag7);
});
//针对某个元素显示特定的提示信息
validate.showErrors({
firstname:"ERROR"
});
});
</script>
</head>
<body>
<form id="signupForm" method="get" action="">
<p id="error_info">
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
<p>
<input class="c" type="button" value="检查表单是否有效" id="check"/>
</p>
</form>
</body>
</html>
以上就是本文的全部內容，程式碼簡單明了，非常有參考借鏡價值，希望大家喜歡。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn