我會將工作中用到的技術(shù)或插件分享出來假褪，也順便保存再次使用光戈。
一個表單驗證的插件 插件原模板叫jQuery-valodate。我簡單修改了一下里面的內(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() {
// 在鍵盤按下并釋放及提交后驗證提交表單
$("#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: "請輸入您的名字",
lastname: "請輸入您的姓氏",
username: {
required: "請輸入用戶名",
minlength: "用戶名必需由兩個字母組成"
},
password: {
required: "請輸入密碼",
minlength: "密碼長度不能小于 5 個字母"
},
confirm_password: {
required: "請輸入密碼",
minlength: "密碼長度不能小于 5 個字母",
equalTo: "兩次密碼輸入不一致"
},
email: "請輸入一個正確的郵箱",
adress: {
required: "請輸入地址",
minlength: "地址必需由兩個字母組成"
},
agree: "請接受我們的聲明",
topic: "請選擇兩個主題"
},
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>用戶注冊</span>
</p>
</div>
<form class="cmxform" id="signupForm" method="get" action="">
<legend>填寫注冊信息</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">驗證密碼</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="立即注冊">
</p>
</form>
</div>
</body>
</html>
