简单,智能,令人愉悦的表单验证~~~
官方文档:http://www.niceue.com/validator/
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="js/validator/jquery.validator.css"/>
<script src="js/jquery.min.js"></script>
<script src="js/validator/jquery.validator.min.js"></script>
<script src="js/validator/local/zh-CN.js"></script>
<script>
$(function(){
$('#userform').validator({
rules: {
telnumber: [/^\d{11}$/],
adminame:function(){
return $("#username").val()=="admin"||"请输入正确的用户名"
}
},
fields: {
username:{
rule:"required;adminame",
msg: {
required: "请填写用户名!"
}
},
usertel:{
rule:"required;telnumber",
msg: {
required: "请填写手机号码!",
telnumber:"请输入11位数字的手机号码"
},
tip:"密码由6-20位数字、字母或下划线组成!",
ok: "输入正确"
}
},
valid: function(form){
//表单验证通过,提交表单到服务器
alert("验证通过");
$.ajax({
url: "result.php",
data: $(form).serialize(),
success: function(d){
//do something
}
});
}
})
})
</script>
</head>
<body>
<form name="userform" id="userform">
用户名:<input type="text" name="username" id="username" placeholder="请输入用户名"/> <span class="msg-box" for="loginName"></span><br><br>
手机号:<input type="tel" name="usertel" placeholder="请输入手机号"/><br><br>
<button type="submit">提交</button>
</form>
</body>
</html>