jQuery EasyUI 表单 - 表单验证插件validatebox

使用时需要向页面引入两个css文件如下:

<link rel="stylesheet" href="css/icon.css"><link rel="stylesheet" href="css/easyui.css">还需要引入三个外部js库

<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script><script src="js/jquery.easyui.min.js" type="text/javascript"></script>//这是中文简体语言包<script src="js/easyui-lang-zh_CN.js" type="text/javascript"></script>

validatebox表单验证实例

 1 $(function () {
 2     $("#name").validatebox({
 3         required:true,
 4         validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],
 5         missingMessage:"请输入用户名"
 6
 7     })
 8
 9     //自定义验证规则
10 $.extend($.fn.validatebox.defaults.rules,{
11
12     //验证用户名的格式
13     checkUser:{
14         validator:function (value, param) {
15             return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)
16         },
17         message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"
18     },
19
20 })
21     //easyui表单提交的控制
22     $('#loginForm').form({
23
24         onSubmit:function(){
25             return $(this).form('validate');
26         },
27         success:function(){
28             $.messager.alert('Info', "恭喜您,注册成功!");
29         }
30     });
31 })

View Code

validate表单验证

需要引入两个外部js库

<script src="js/jquery-1.12.3.min.js" type="text/javascript"></script>

<script src="js/jquery.validate.min.js"></script>

validate表单验证实例

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>验证框架的使用</title>
  6
  7     <style type="text/css">
  8         .error{
  9             color: red;
 10         }
 11     </style>
 12 </head>
 13 <body>
 14 <form action="success.html" method="post" id="myForm">
 15     用户名：<input name="userName">  <br/>
 16     密码：<input name="password" type="password" id="pwd">  <br/>
 17     确认密码：<input name="repPassword"type="password" >  <br/>
 18     邮箱：<input name="email">  <br/>
 19     手机号：<input name="phone">  <br/>
 20     性别：<input name="sex"  type="radio" value="男" checked>男
 21         <input name="sex"  type="radio" value="女">女<br/>
 22     是否同意协议<input type="checkbox" name="context"><br/>
 23    <button type="submit">注册</button>
 24 </form>
 25
 26
 27 <!--引入需要的js库-->
 28 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 29 <script type="text/javascript" src="../js/jquery.validate.js"></script>
 30 <script type="text/javascript">
 31     $(function(){
 32         //form表单的验证事件
 33         $("#myForm").validate({
 34             //验证规则  需要对哪些元素做验证
 35             rules:{
 36                 userName:{
 37                     required:true
 38                 },
 39             password:{
 40                 required:true,
 41                 minlength:6,
 42                 maxlength:10
 43             },
 44            repPassword:{
 45                required:true,
 46                minlength:6,
 47                maxlength:10,
 48                equalTo:"#pwd"
 49            },
 50           email:{
 51                     required:true,
 52                     email:true
 53            },
 54                 phone:{
 55                     required:true,
 56                     checkPhone:true  //自己书写的手机验证正则
 57                 },
 58                 context:{
 59                     required:true
 60                 }
 61             },  //rules  end
 62             //不符合验证规则的错误信息
 63             messages:{
 64                 userName:{
 65                     required:"请输入用户名"
 66                 },
 67                 password:{
 68                     required:"请输入密码",
 69                     minlength:"密码长度不能少于6位",
 70                     maxlength:"密码长度不能大于10位"
 71                 },
 72                 repPassword:{
 73                     required:"请输入密码",
 74                     minlength:"密码长度不能少于6位",
 75                     maxlength:"密码长度不能大于10位",
 76                     equalTo:"两次密码输入不一致"
 77                 },
 78                 email:{
 79                     required:"请输入邮箱",
 80                     email:"邮箱格式不正确"
 81                 },
 82                 phone:{
 83                     required:"请输入手机号",
 84                     checkPhone:"电话号码格式不正确"//自己书写的手机验证正则
 85                 },
 86                 context:{
 87                     required:"您没有同意协议"
 88                 }
 89             },  // messages  end
 90             //鼠标失去焦点立即验证
 91             onfocusout:function(element){
 92                 $(element).valid();
 93             }
 94     });  //  end   validate
 95         //增加了手机验证正则
 96         jQuery.validator.addMethod("checkPhone",function(value,element){
 97             var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/
 98             return this.optional(element) || (tel.test(value));
 99         },"电话号码格式不正确")
100     })
101 </script>
102
103
104
105
106 </body>
107 </html>

View Code

$(function () {$("#name").validatebox({required:true,validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],missingMessage:"请输入用户名"

})$("#phone").validatebox({required:true,validType:['userTel'],missingMessage:"请输入电话号码"})$("#userPwd").validatebox({required:true,validType:['minlength[6]','maxlength[16]'],missingMessage:"请输入密码"})$("#userePwd").validatebox({required:true,validType:['minlength[6]','maxlength[16]','checkPass','equalTo["#userPwd"]'],missingMessage:"请再次输入密码"})

//自定义验证规则$.extend($.fn.validatebox.defaults.rules,{

//验证用户名的格式checkUser:{validator:function (value, param) {return /^[a-zA-Z][a-zA-Z0-9_]{5,17}$/.test(value)        },message:"6~18个字符，可使用字母、数字、下划线，需以字母开头"},//验证用户名的长度minlengthUser:{validator:function(value,param){return value.length>=param[0];        },message:"用户名长度至少为{0}位"},maxlengthUser:{validator:function(value,param){return value.length<param[0];        },message:"用户名长度必须小于{0}位"},//验证密码最小长度minlength:{validator:function(value,param){return value.length>=param[0];      },message:"密码长度至少为{0}位"},//验证密码最大长度maxlength:{validator:function(value,param){return value.length<param[0];        },message:"密码长度必须小于{0}位"},//验证两次密码是否一致equalTo: {validator: function (value, param){return $(param[0]).val() == value;        },message: "两次输入密码不匹配"},//验证手机号userTel: {validator: function (value, param) {return /^1[3|4|5|8|9][0-9]{9}$/.test(value);},message: "手机号码格式不正确"}

})//easyui表单提交的控制$('#loginForm').form({

onSubmit:function(){return $(this).form('validate');        },success:function(){$.messager.alert('Info', "恭喜您,注册成功!");        }    });

转载于:https://www.cnblogs.com/zqr99/p/7554495.html

jQuery-easyui和validate表单验证实例相关推荐

html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
jQuery表单验证实例 / 包含用户名.密码.住址.邮箱验证如下图别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type="text/ ...
validate表单验证的用法
正则表达式验证字符串 var value='这是待验证的字符串' var char=/^[\u4e00-\u9fa5]+$/; //稚嫩恶搞输入汉字 console.log(char.test(val ...
Validate 表单验证用法说明
前言 Validate 是 jQuery 的一个子插件, 该插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足用户的各种验证需求.该插件捆绑了一套有用的验证方法 ...
jQuery之简单的表单验证
jQuery之简单的表单验证 html部分: <body><form method="post" action=""><div c ...
JavaScript使用正则表达式进行邮箱表单验证实例
*******JavaScript使用正则表达式进行邮箱表单验证实例************ 1.在JavaScript中也可以使用正则表达式对表单输入的数据进行验证格式如下 /正则表达式/.test ...
php表单验证代码实例,PHP表单验证实例代码-三体教程在线编辑器
三体教程(santii.com) .error {color: #FF0000;} // 定义变量并默认设置为空值 $nameErr = $emailErr = $genderErr = $websi ...
jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...
jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

jQuery-easyui和validate表单验证实例

jQuery EasyUI 表单 - 表单验证插件validatebox

validatebox表单验证实例

validate表单验证

validate表单验证实例

jQuery-easyui和validate表单验证实例相关推荐

最新文章

热门文章