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表单验证实例

 $(function () {

     $("#name").validatebox({

         required:true,

         validType:['minlengthUser[6]','maxlengthUser[16]','checkUser'],

         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个字符，可使用字母、数字、下划线，需以字母开头"

     },

 })

     //easyui表单提交的控制

     $('#loginForm').form({

         onSubmit:function(){

             return $(this).form('validate');

         },

         success:function(){

             $.messager.alert('Info', "恭喜您,注册成功!");

         }

     });

 })


validate表单验证


需要引入两个外部js库


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


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


validate表单验证实例






 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>验证框架的使用</title>

     <style type="text/css">

         .error{

             color: red;

         }

     </style>

 </head>

 <body>

 <form action="success.html" method="post" id="myForm">

     用户名：<input name="userName">  <br/>

     密码：<input name="password" type="password" id="pwd">  <br/>

     确认密码：<input name="repPassword"type="password" >  <br/>

     邮箱：<input name="email">  <br/>

     手机号：<input name="phone">  <br/>

     性别：<input name="sex"  type="radio" value="男" checked>男

         <input name="sex"  type="radio" value="女">女<br/>

     是否同意协议<input type="checkbox" name="context"><br/>

    <button type="submit">注册</button>

 </form>

 <!--引入需要的js库-->

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

 <script type="text/javascript" src="../js/jquery.validate.js"></script>

 <script type="text/javascript">

     $(function(){

         //form表单的验证事件

         $("#myForm").validate({

             //验证规则  需要对哪些元素做验证

             rules:{

                 userName:{

                     required:true

                 },

             password:{

                 required:true,

                 minlength:6,

                 maxlength:10

             },

            repPassword:{

                required:true,

                minlength:6,

                maxlength:10,

                equalTo:"#pwd"

            },

           email:{

                     required:true,

                     email:true

            },

                 phone:{

                     required:true,

                     checkPhone:true  //自己书写的手机验证正则

                 },

                 context:{

                     required:true

                 }

             },  //rules  end

             //不符合验证规则的错误信息

             messages:{

                 userName:{

                     required:"请输入用户名"

                 },

                 password:{

                     required:"请输入密码",

                     minlength:"密码长度不能少于6位",

                     maxlength:"密码长度不能大于10位"

                 },

                 repPassword:{

                     required:"请输入密码",

                     minlength:"密码长度不能少于6位",

                     maxlength:"密码长度不能大于10位",

                     equalTo:"两次密码输入不一致"

                 },

                 email:{

                     required:"请输入邮箱",

                     email:"邮箱格式不正确"

                 },

                 phone:{

                     required:"请输入手机号",

                     checkPhone:"电话号码格式不正确"//自己书写的手机验证正则

                 },

                 context:{

                     required:"您没有同意协议"

                 }

             },  // messages  end

             //鼠标失去焦点立即验证

             onfocusout:function(element){

                 $(element).valid();

             }

     });  //  end   validate

         //增加了手机验证正则

         jQuery.validator.addMethod("checkPhone",function(value,element){

             var tel = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/

             return this.optional(element) || (tel.test(value));

         },"电话号码格式不正确")

     })

 </script>

 </body>

 </html>






 


$(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[];
        },
        message:"用户名长度至少为{0}位"
},
    maxlengthUser:{
        validator:function(value,param){
            return value.length<param[];
        },
        message:"用户名长度必须小于{0}位"
},
    //验证密码最小长度
minlength:{
      validator:function(value,param){
           return value.length>=param[];
      },
        message:"密码长度至少为{0}位"
},
    //验证密码最大长度
maxlength:{
        validator:function(value,param){
            return value.length<param[];
        },
        message:"密码长度必须小于{0}位"
},
    //验证两次密码是否一致
equalTo: {
        validator: function (value, param){
            return $(param[]).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', "恭喜您,注册成功!");
        }
    });
												


											
jQuery-easyui和validate表单验证实例的更多相关文章
	

    
								
  1. 基于jQuery的Validate表单验证
		
    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...
    
		
    2. 
						
  2. ASP.NET MVC Jquery Validate 表单验证的多种方式
		
    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
    
		
    3. 
						
  3. 【干货】Laravel --Validate (表单验证) 使用实例
		
    前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
    
		
    4. 
						
  4. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
		
    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
    
		
    5. 
						
  5. Jquery Validate 表单验证的多种方式
		
    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
    
		
    6. 
						
  6. 第二百二十一节，jQuery EasyUI，Form(表单)组件
		
    jQuery EasyUI,Form(表单)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Form(表单)组件的使用方法,这个组件不依赖于 ...
    
		
    7. 
						
  7. jquery-4 完整表单验证实例
		
    jquery-4 完整表单验证实例 一.总结 一句话总结:在form的jquery对象中返回false即可终止表单提交. 1.验证的显示错误消息如何布局? 开始时隐藏,出现错误后显示 10 .erro ...
    
		
    8. 
						
  8. validate表单验证-单独验证
		
    今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...
    
		
    9. 
						
  9. Bootstrap+PHP表单验证实例
		
    简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. linux shell $ 特殊变量
			
    $0   #Shell本身的文件名 $1-$n   #添加到Shell的各参数值.$1是第1参数.$2是第2参数… $*   #所有参数列表.如"$*"用「"」括起来的情 ...
    
			
    2. 
						
  2. python之json数据存储
			
    # 数据存储:json.dump()和json.load() # date:2017-07-17 import json file_name = 'D:/json_file.txt' nums = [ ...
    
			
    3. 
						
  3. docker--Dockerfile--sonarqube
			
    FROM openjdk:8 ENV SONAR_VERSION=6.7.1 \ SONARQUBE_HOME=/opt/sonarqube \ # Database configuration #  ...
    
			
    4. 
						
  4. BZOJ2002[Hnoi2010]弹飞绵羊——LCT
			
    题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系 ...
    
			
    5. 
						
  5. 数字对——RMQ+二分答案
			
    题目描述 小H是个善于思考的学生,现在她又在思考一个有关序列的问题. 她的面前浮现出一个长度为n的序列{ai},她想找出一段区间[L, R](1 <= L <= R <= n). 这 ...
    
			
    6. 
						
  6. UVa - 10341
			
    Solve the equation:p ∗ e ^−x + q ∗ sin(x) + r ∗ cos(x) + s ∗ tan(x) + t ∗ x ^2 + u = 02 + u = 0where ...
    
			
    7. 
						
  7. Mac 下重新安装配置ibm Lotus 邮箱
			
    若邮箱之前有人使用,需要重新安装.在卸载程序之后,发现仍旧无法重新配置新的账号. 此时需要删除用户目录下的2个文件: /Library/Application Support/IBM Notes Da ...
    
			
    8. 
						
  8. Leetcode 70.爬楼梯 By Python
			
    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...
    
			
    9. 
						
  9. 导出SharePoint2013用户及权限
			
    cls Add-PSSnapin Microsoft.SharePoint.PowerShell -ea 0 $site = New-Object Microsoft.SharePoint.SPSit ...
    
			
    10. 
						
  10. py3+urllib+re，轻轻松松爬取双色球最近100期中奖号码
			
    通过页面源码,发现使用正则表达式可以很方便的获取到我们需要的数据,最后循环写入txt文件. (\d{2})表示两位数字 [\s\S]表示匹配包括“\r\n”在内的任何字符,匹配红球和蓝球之间的内容 具 ...
    
			
    11.