正常form表单验证
1.写入form表单这样写
<meta name="csrf-token" content="{{csrf_token()}}">
<form id = "projectForm">
<input name='title' type="text" class="form-control _input" placeholder="请输入项目标题">
<textarea name='content' class="form-control _input" rows="4" placeholder="请输入项目简介"></textarea>
<input name = "image"/>
<input name = "file"/>
</form>
2.在本页面引入jq以及jquery.validate
<script type="text/javascript" src="{{url('/qiniu/js/jquery.js')}}"></script>
<script src="{{asset('admin/js/jquery.validate.min.js')}}"></script>
3.初始化表单验证
刚才写的表单中有几个点是有用的，form的id，用于实例化，input 的name，是验证工具获取需要验证的字段的依据，最后一定要有type = submit，这是提交表单以及验证的触发器。
!(function ($) {
"use strict";//使用严格标准
// 获取表单元素
var FormValidator = function(){
this.$projectForm = $("#projectForm");
};
// 初始化
FormValidator.prototype.init = function() {
this.$projectForm.validate({
// 验证规则
rules: {
title: {
required: true
},
content: {
required: true
},
image: {
required: true
},
file: {
required: true
}
},
// 提示信息
messages: {
title: {
required: '必须要填写标题哦'
},
content: {
required: '必须要填写项目简介哦'
},
image: {
required: '必须要上传一张图片哦'
},
file: {
required: '必须要上传一份项目文件哦'
}
},
ignore: ' ' // 注意！注意！ 加上这句，能给隐藏字段做验证！
});
};
$.FormValidator = new FormValidator;
$.FormValidator.Constructor = FormValidator;
})(window.jQuery),
function($){
"use strict";
$.FormValidator.init();
}(window.jQuery);
ajax提交表单验证(兄弟会尹茂林)
1.上面的原则同样适用，只是要多加一些东西。
!function($) {
"use strict";
var FormValidator = function() {
//实例化验证工具
this.$projectForm = $("#projectForm");
};
FormValidator.prototype.init = function() {
//比起正常表单，多出了这一步，ajax写到这里面
$.validator.setDefaults({
submitHandler: function() {
$.ajaxSetup({
//将laravel的csrftoken加入请求头，所以页面中应该有meta标签，详细写法在上面的form表单部分
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
//与正常form不同，通过下面这样来获取需要验证的字段
var data = new FormData();
data.append( "title" , $('input[name=title]').val());
data.append( "content" , $('input[name=content]').val());
data.append( "image" , $('input[name=image]').val());
data.append( "file" , $('input[name=file]').val());
//开始正常的ajax
$.ajax({
url:'/project',
type:'post',
data:{
title:$("input[name='title']").val(),
content:$("textarea[name='content']").val(),
image:$("input[name='image']").val(),
file:$("input[name='file']").val(),
_token:$("#_token").val()
},
success:function(data){
alert('添加成功');
},
error:function(){
alert('添加失败');
}
})
}
});
// validate signup form on keyup and submit
this.$projectForm.validate({
// 验证规则
rules: {
title: {
required: true
},
content: {
required: true
},
image: {
required: true
},
file: {
required: true
}
},
// 提示信息
messages: {
title: {
required: '必须要填写标题哦'
},
content: {
required: '必须要填写项目简介哦'
},
image: {
required: '必须要上传一张图片哦'
},
file: {
required: '必须要上传一份项目文件哦'
}
}，
ignore: ' ' // 注意！注意！ 加上这句，能给隐藏字段做验证！
});
},
//init
$.FormValidator = new FormValidator,
$.FormValidator.Constructor = FormValidator
}(window.jQuery),
function($) {
"use strict";
$.FormValidator.init()
}(window.jQuery);
这样写完之后，点击submit提交的时候如果验证不通过，无论是表单还是ajax，都不会提交请求，而且表单验证默认还有失焦验证。
小demo
/**
* 昵称修改
*/
!(function ($) {
"use strict";
var FormValidator = function(){
this.$projectForm = $("#nickname-form");
};
FormValidator.prototype.init = function() {
$.validator.setDefaults({
submitHandler: function() {
var data = new FormData();
var nickname = $('#nickname-form').find('input[name=nickname]').val();
data.append( "nickname", nickname);
//开始正常的ajax
$.ajax({
url:'/api/user/nickname',
type:'post',
data:{
nickname:nickname,
_token:$('meta[name=csrf-token]').attr('content')
},
success:function(data){
console.log(data);
if (data.ServerNo===200) {
// 成功将input默认框改为data.ResultData 并弹出提示框 2秒后隐藏
$('#nickname-form').find('.info-alert').removeClass('error- alert').addClass('success-alert').html('操作成功').show();
$('#nickname- form').find('input[name=nickname]').attr('placeholder',data.ResultData);
setTimeout(function(){
$('#nickname-form').find('.info-alert').hide();
},2000)
} else {
$('#nickname-form').find('.info-alert').removeClass('success- alert').addClass('error-alert').html('操作失败').show();
}
},
error:function(){
$('#nickname-form').find('.alert-info').removeClass('success- alert').addClass('error-alert').html('操作失败').show();
}
})
}
});
this.$projectForm.validate({
// 验证规则
rules: {
nickname: {
required: true,
}
},
// 提示信息
messages: {
nickname: {
required: '昵称不能为空哦'
}
}
});
};
$.FormValidator = new FormValidator;
$.FormValidator.Constructor = FormValidator;
})(window.jQuery),
function($){
"use strict";
$.FormValidator.init();
}(window.jQuery);
自定义验证规则
/**
* 为jq Validate添加密码格式验证
*/
var pswReg = /^(?![^a-zA-Z]+$)(?!\D+$).{6,}$/;
$.validator.addMethod("mix",function(value,element,params){
if (pswReg.test(value)) {
return true
} else {
return false;
}
},"必须6位以上，并包含字母和数字哦");
验证中这样写
password: {
required: true,
minlength: 6,
mix:true
},