我會(huì)將工作中用到的技術(shù)或插件分享出來(lái)，也順便保存再次使用。
一個(gè)表單驗(yàn)證的插件 插件原模板叫jQuery-valodate。我簡(jiǎn)單修改了一下里面的內(nèi)容。PS:公司產(chǎn)品保密，style樣式已刪。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 在鍵盤(pán)按下并釋放及提交后驗(yàn)證提交表單
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
adress: {
required: true,
minlength: 2
},
"topic[]": {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
firstname: "請(qǐng)輸入您的名字",
lastname: "請(qǐng)輸入您的姓氏",
username: {
required: "請(qǐng)輸入用戶名",
minlength: "用戶名必需由兩個(gè)字母組成"
},
password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母"
},
confirm_password: {
required: "請(qǐng)輸入密碼",
minlength: "密碼長(zhǎng)度不能小于 5 個(gè)字母",
equalTo: "兩次密碼輸入不一致"
},
email: "請(qǐng)輸入一個(gè)正確的郵箱",
adress: {
required: "請(qǐng)輸入地址",
minlength: "地址必需由兩個(gè)字母組成"
},
agree: "請(qǐng)接受我們的聲明",
topic: "請(qǐng)選擇兩個(gè)主題"
},
errorPlacement: function(error, element) {
// Append error within linked label
error.appendTo(element.parent().parent());
},
errorElement: "span"
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<div class="body">
<div class="user">
<p>
<span>用戶注冊(cè)</span>
</p>
</div>
<form class="cmxform" id="signupForm" method="get" action="">
<legend>填寫(xiě)注冊(cè)信息</legend>
<p>
<label for="username" class="msg">用戶名</label>
<span class="inPut">
<input id="username" name="username" type="text">
</span>
</p>
<p>
<label for="password" class="msg">密碼</label>
<span class="inPut">
<input id="password" name="password" type="password">
</span>
</p>
<p>
<label for="confirm_password" class="msg">驗(yàn)證密碼</label>
<span class="inPut">
<input id="confirm_password" name="confirm_password" type="password">
</span>
</p>
<p>
<label for="email" class="msg">Email</label>
<span class="inPut">
<input id="email" name="email" type="email">
</span>
</p>
<p>
<label for="adress" class="msg">IP</label>
<span class="inPut">
<input id="adress" name="adress" type="text">
</span>
</p>
<p class="beizhu">
<label for="beizhu" class="msg">備注</label>
<textarea name="beizhu" id="beizhu" rows="" cols=""></textarea>
</p>
<p class="agree">
<span>
<input type="checkbox" class="checkbox" id="agree" name="agree" >
<label for="agree">我已閱讀并同意 <span class="user">用戶服務(wù)協(xié)議</span></label>
</span>
</p>
<p class="agree">
<input class="submit btn" type="submit" value="立即注冊(cè)">
</p>
</form>
</div>
</body>
</html>
