jquery validate验证

1. 引入jquery

<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://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

2.写js验证

<script>
$("#form-member-add").validate({rules:{username:{required:true,minlength:2,maxlength:16},password:{required:true,minlength:6,},password_confirmation:{required:true,minlength:6,equalTo: "#password"},phone:{required:true,isMobile:true,},},onkeyup:false,focusCleanup:false,success:"valid",submitHandler:function(form){表单提交}});
</script>

3.html文件

<form action="提交地址" method="post" class="form form-horizontal" id="form-member-add">@csrf<div class="row cl"><div class="formControls col-xs-8 col-sm-9">用户名<input type="text" class="input-text" value="" placeholder="" id="username" name="username"></div></div><div class="row cl"><div class="formControls col-xs-8 col-sm-9">密码<input type="password" class="input-text" value="" placeholder="" id="password" name="password"></div></div><div class="row cl"><div class="formControls col-xs-8 col-sm-9">校验密码<input type="password" class="input-text" value="" placeholder="" id="password_confirmation" name="password_confirmation"></div></div><div class="row cl"><div class="formControls col-xs-8 col-sm-9">手机<input type="text" class="input-text" value="" placeholder="" id="phone" name="phone"></div></div><div class="row cl"><div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"><input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"></div></div></form>

效果图

4.这里的表单提交有2种

1:ajax提交

<script>
//表示捕获form表单中的所有值,采用ajax方式提交，路由则是form中action的值$("#form-member-add").validate({// 规则rules: {// 表单元素名称,也就是name的值username: {// 验证规则//不能为空required: true,//最小两位minlength: 2}},messages: {username: {required: "请输入用户名",minlength: "用户名必需由两个以上字符组成"}},submitHandler: function(form) {      $(form).ajaxSubmit({//如果不加datatype是无法接收到回调内容datatype:'JSON',success: function (res) {//console.log(res)if (res.code == 200){parent.location.reload();}}});     }
})</script>

2：表单同步提交

<script>
//表示捕获form表单中的所有值,采用同步方式提交，路由则是form中action的值$("#form-member-add").validate({// 规则rules: {// 表单元素名称,也就是name的值username: {// 验证规则//不能为空required: true,//最小两位minlength: 2}},messages: {username: {required: "请输入用户名",minlength: "用户名必需由两个以上字符组成"}},submitHandler: function (form) {// 同步表单提交form.submit();}
})
</script>

5.自定义验证手机号 validate 里面没有直接验证手机号格式的需要自己定义在需要验证手机号的时候 phone:true 即可验证

      // 自定义验证规则// 手机号验证jQuery.validator.addMethod("phone", function (value, element) {// patrn = /^(\+86-)?1[3-9]\d{9}$/;var reg1 = /^\+86-1[3-9]\d{9}$/;var reg2 = /^1[3-9]\d{9}$/;var ret = reg1.test(value) || reg2.test(value);return this.optional(element) || ret;}, "请输入正确的手机号码");

jquery validate验证相关推荐

jQuery Validate验证框架详解
2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
jQuery.Validate 验证,以及 remote验证, 多参数传递
jQuery.Validate 验证: http://www.runoob.com/jquery/jquery-plugin-validate.html 教程网址,很简单, 今天主要在这里记录一下re ...
jQuery.Validate 验证
jQuery校验一导入js库 <script src="../js/jquery.js" type="text/javascript"></ ...
Jquery validate验证表单只验证第一个input元素
jQuery Validate 使用方式在这篇文章 jQuery Validate 使用jquery.validate插件对表单进行验证时,当name属性相同,或者没有设置name属性时,则valid ...
jQuery Validate验证方法及教程
//实名认证验证 $(function(){//中文姓名验证jQuery.validator.addMethod("zh_verify", function(value, ele ...
Jquery validate验证表单时多个name相同的元素只验证第一个的问题
下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jquery. ...
jQuery.Validate验证库 2
四.使用方式 1.将校验规则写到控件中 Js代码 <script src="../js/jquery.js" type="text/javascript" ...
jQuery.Validate验证库
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassi ...

jquery validate验证

jquery validate验证相关推荐

最新文章

热门文章