個人jquery validate 筆記

時間 2019-12-13

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單驗證</title>
</head>
<script type="text/javascript" src="jquery-validation-1.14.0/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript" src="jquery-validation-1.14.0/dist/additional-methods.js"></script>
<style type="text/css">
p{margin:0;}
label.error{ color:red;font-size: 12px;text-indent: 2em;display: inline-block;background:url("./images/error.png") no-repeat 0 0;}
</style>
<body>
<div class="container">
<form id="infor_form" method="get">
<fieldset>
<legend>請輸入您的姓名、郵箱和電話號碼</legend>
<p>
<label for="name">姓名</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label for="mail">郵箱</label>
<input type="email" name="mail" id="mail" required>
</p>
<p>
<label for="tel">電話</label>
<input type="text" name="tel" id="tel" required>
</p>
<p>
<label for="password">密碼</label>
<input type="text" name="password" id="password" required>
</p>
<p>
<label for="password1">再次輸入密碼</label>
<input type="text" name="password1" id="password1" required>
</p>
<p><input type="submit" class="submit" value="submit"></p>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$('#infor_form').validate({javascript

rules:{
name:{
isChinaName:true,
minlength:2,
maxlength:10
},
tel:{
isTel:true
},
email: {
isMail: true

},
password:{
required:true,
minlength:3
},
password1:{
required:true,
minlength:3,
equalTo: "#password"
}
},
messages:{
name:{
isChinaName:"請輸入一個合法的中文名",
},
tel:{
isTel:"請輸一個正確的手機號碼"
},
email:{
isMail:"請輸入一個有效的郵箱地址"
},
password1:{
equalTo:"兩次密碼輸入不一致"
}
},
errorPlacement: function(error, element) {
//error.appendTo(element.parent()); //顯示在當前input的右側
error.insertAfter(element.parent());//顯示在p標籤的下方
}
});
})css

</script>
</html>html

在此貼上個人筆記，望對你們有所幫助java

我在additional-methods.js中自定義添加的代碼爲：jquery

//手機號驗證
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^1[0-9]{10}$/;
return this.optional(element) || (tel.test(value));
}, "請正確填寫您手機號碼");app

//郵箱地址ui

jQuery.validator.addMethod("isMail", function(value, element) {
var mail= /^(\w)+((\.|-)\w+)*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
return this.optional(element) || (mail.test(value));
}, "請輸入一個有效的郵箱地址");this

// 姓名驗證url

jQuery.validator.addMethod("isChinaName", function(value, element) {
var pattern= /^[\u4E00-\u9FA5A-Za-z]+$/;
return this.optional(element) || (pattern.test(value));
}, "請輸入一個有效的中文名");spa

注意：自定義的方法要與原文件中方法保持一致，逗號隔開。

最後的效果就是：