我会将工作中用到的技术或插件分享出来，也顺便保存再次使用。
一个表单验证的插件 插件原模板叫jQuery-valodate。我简单修改了一下里面的内容。PS:公司产品保密，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">用户服务协议</span></label>
</span>
</p>
<p class="agree">
<input class="submit btn" type="submit" value="立即注册">
</p>
</form>
</div>
</body>
</html>
