版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_38004619/article/details/89335941
jquery插件validate的使用实例
- 概念：菜鸟教程讲解的很详细地址http://www.runoob.com/jquery/jquery-plugin-validate.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://malsup.github.io/jquery.form.js"></script>
<script>
//回调函数
function showResponse(responseText,statusText) {
if(statusText=='success'){
var res = JSON.parse(responseText);
if(res.status==1){
alert("后台数据处理成功")
}else{
alert("后台数据处理失败")
}
}
}
$(document).ready(function() {
//在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
//表单整体提交
submitHandler:function(form){
dataType : "json"
$(form).ajaxSubmit({
type:"post",
url :"./test.php",
success: showResponse//回调函数
});
},
//ajax单个校验成功返回结果(后台返回 true时触发)
success: function(label) {
label.addClass("valid").text("Ok!")//可以定义
},
//校验规则
rules: {
username: {
required: true,//必填
//ajax单个校验
remote: {
url: './index.php',
type: 'post',
data: {
username: function() {
return $('#username').val();
}
},
}
},
},
//如果发生错误触犯对应的提示信息
messages: {
username: {
required: "请输入用户名",
remote: '远程返回错误' //ajax单个校验失败自定义结果（后台返回false触发）
},
}
})
});
</script>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">密码</label>
<input id="password" name="password" type="text">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</form>
</body>
</html>