＃表单利用Jquery验证验证以及ajax提交
概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程，以及Validate的自定义提示语，非空判断，输入字段的远程ajax验证等
。———-
环境准备在html中引入四个js文件（jquery文件，jquery.form文件，jquery.validate文件，jquery.validate.extend文件）：
<script src =“/ jquery / jquery-1.8..min.js”type =“text / javascript”> </ script>
<script src =“/ jquery / jQuery.Form.js” type =“text / javascript”> </ script>
<script type =“text / javascript”src =“/ jquery / jquery.validate.js”charset =“UTF-”> </ script>
<script type =“ text / javascript“src =”/ jquery / jquery。validate.extend.js“charset =”UTF-“> </ script> ```
下载地址：[ jQuery插件之窗体：http：//download.****.net/detail/s445320/9438163 ]（http://download.****.net/detail/s445320/9438163 ）[ jquery-1.8.3.min.js：http ：//download.****.net/detail/s445320/9438161 ]（http://download.****.net/detail/s445320/9438161 ）[ jquery.validate.js：http：//download.****.net/detail / s445320 / 9612201 ]（http://download.****.net/detail/s445320/9612201 ）[ jquery.validate.extend.js：http://download.****.net/detail/s445320/9616989 ]（http： //download.****.net/detail/s445320/9616989 ） - **编写html区域（form及input）** ```
<form id =“inputForm”name =“inputForm”action =“../ xxxx / xxxxaccount”method =“post”novalidate =“novalidate”>
<input type =“text”name =“name”id =“name” class =“form-control required”value =“刘伟”onfocus = this.blur（）>
</ form> ```
- ** 编写Javascript表单验证区域** ```
<script type =“text / javascript “>
$（document）.ready（
function（）{
$（”＃inputForm“）。validate（{
submitHandler：function（form）{//验证通过后的执行方法
//当前的窗体通过ajax方式提交（用到jQuery.Form文件）
$（form）.ajaxSubmit（{
dataType：“json”，
成功：函数（jsondata）{
if（jsondata.code = ）{
alert("success");
}else{
alert("fail");
}
}
}); },
focusInvalid : true, //验证提示时，鼠标光标指向提示的input
rules : { //验证尺度
account : {
required : true, //验证非空
remote: { //远程ajax验证
url: "../xxxx/checkaccount", //检查是否存在账号，存在则返回true
type: "GET",
dataType: "json",
data: {
account: function () {
return $("#account").val(); //这个是取要验证的用户名
}
},
dataFilter: function (data) { //判断控制器返回的内容
var notice = eval("("+ data +")");
if( notice ){
return false;
}else{
return true;
}
}
}
},
},
messages : {
account : {
required : "用户名不能为空",
remote: "用户名已存在！" //这个地方如果不写的话，是自带的提示内容，加上就是这个内容。
}
},
errorElement : "div",
errorClass : "error_info",
highlight : function(element, errorClass,
validClass) {
$(element).closest('.form-control').addClass(
'highlight_red');
},
success : function(element) {
$(element).siblings('.form-control')
.removeClass('highlight_red');
$(element).siblings('.form-control').addClass(
'highlight_green');
$(element).remove();
} });
});
</script> 效果图如下：
原文链接：https://blog.****.net/s445320/article/details/50748975