EasyUI表单验证

EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性。

验证规则

验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则:

  • email:匹配 email 正则表达式规则,系统提供的属性。
  • url:匹配 URL 正则表达式规则
  • length[0,100]:允许从 x 到 y 个字符
  • remote[‘http://.../action.do‘,‘paramName‘]:发送 ajax 请求来验证值,成功时返回 ‘true‘ 。

要自定义验证规则,重写 $.fn.validatebox.defaults.rules ,来定义一个验证函数和无效的信息。例如,定义一个 minLength 验证类型:

1. $.extend($.fn.validatebox.defaults.rules, {

2.      minLength: {

3.          validator: function(value, param){

4.              return value.length >= param[0];

5.          },

6.          message: ‘Please enter at least {0} characters.‘

7.      }

8.  });

特性


名称


类型


说明


默认值


required


boolean


定义是否字段应被输入。


false


validType


string


定义字段的验证类型,比如 email、url,等等。


null


missingMessage


string


当文本框是空时出现的提示文字。


This field is required.


invalidMessage


string


当文本框的内容无效时出现的提示文字。


null

方法


名称


参数


说明


destroy


none


移除并且销毁这个组件。


validate


none


进行验证以判定文本框的内容是否有效。


isValid


none


调用 validate 方法并且返回验证结果,true 或者 false。

<div id="userReg" class="easyui-panel" style="width:400px; height:300px;" title="注册用户">  
            <form action="" method="post">  
                <table>  
                    <tr>  
                        <td>用户名:</td>  
                        <td><input type="text" name="username" class="easyui-validatebox" required=true  
                         validType="midLength[4,10]" value=""/></td>  
                    </tr>  
                    <tr>  
                        <td>密码:</td>  
                        <td><input type="text" name="password" class="easyui-validatebox" required=true validType="pwdLength[8]" value=""/></td>  
                    </tr>  
                    <tr>  
                        <td>性别:</td>  
                        <td>  
                            <input type="radio" name="sex" checked="checked" value="male"/>男  
                            <input type="radio" name="sex" value="female"/>女  
                        </td>  
                    </tr>  
                    <tr>  
                        <td>年龄:</td>  
                        <td><input type="text" name="age" value=""/></td>  
                    </tr>  
                    <tr>  
                        <td>出生日期:</td>  
                        <td><input type="text" name="birth" value=""/></td>  
                    </tr>  
                        <tr>  
                        <td>所属城市:</td>  
                        <td><input type="text" name="city" value=""/></td>  
                    </tr>  
                        <tr>  
                        <td>薪水:</td>  
                        <td><input type="text" name="salary" value=""/></td>  
                    </tr>  
                    <tr>  
                        <td colspan="2">  
                            <a class="easyui-linkbutton">保存</a>  
                        </td>  
                    </tr>  
                </table>  
            </form>  
        </div> 
<script type="text/javascript">
		$(function(){
			$.extend($.fn.validatebox.defaults.rules,{
			   midLength:{
			       validator:function(value, param){
			           return value.length >= param[0] && value.length<=param[1];
			       },
			       message: '用户名必须在4到10位之间!'
			   },
			   pwdLength:{
			   		validator:function(value,param){
			   			return value.length==param[0];
			   		},
			   		message:'密码必须是8位'
			   }
			});  

	});
	</script>

参考图片如下:

时间: 2024-10-29 19:07:36

EasyUI表单验证的相关文章

Jquery插件easyUi表单验证提交

<form id="myForm" method="post"> <table align="center" style="width:400px;height:auto;margin-top: 20px"> <tr> <td align="right">命令:</td> <td><input id="cmd"

EasyUI 表单验证扩展(备忘录)

$.extend($.fn.validatebox.defaults.rules, {     minLength : { // 判断最小长度         validator : function(value, param) {             return value.length >= param[0];         },         message : "最少输入 {0} 个字符."     },     length:{validator:functi

atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证

atittit.表单验证的实现方式以及原理本质以及选型以及自定义兼容easyui dsl规则的表单验证 1. 需求,表单验证需要弹框式,但目前easyui ms绑定死了tooltip式样 1 2. 表单验证表现形式 1 2.1. 弹框 1 2.2. 浮动tooltip,推荐这个 1 3. 表单验证的实现原理 1 3.1. 定义reg 2 3.2. 解释 2 3.3. 调用提示... 2 4. 表单验证框架选型easyui>ligerui 2 4.1. ligerui的表单验证选型... 2 4.

atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则

atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单验证表现形式 1 2.1. 弹框 1 2.2. 浮动tooltip.推荐这个 1 3. 表单验证的实现原理 1 3.1. 定义reg 2 3.2. 解释 2 3.3. 调用提示. .. 2 4. 表单验证框架选型easyui>ligerui 2 4.1. ligerui的表单验证选型. .. 2 4

扩展easyui 的表单验证 (转)

From:http://www.cnblogs.com/gengaixue/archive/2012/07/14/2591054.html easyui 的validatebox()提供了自定义验证的方法,为此我把一些常用的数据验证汇总了一下,代码如下: $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u0391-\uFFE5]+$/.test(v

atitit.表单验证 的dsl 本质跟 easyui ligerui比较

atitit.表单验证的dsl 本质跟 easyui ligerui比较 1. DSL 声明验证 1 2. 自定义规则 1 3. 正则表达式验证,可以扩展实现 2 4. 犯错误消息提示,generic canBeEmpty is good 3 5. Prevent the form to submit when invalid 3 6. 为空则不验证,不为空则验证,的实现 5 7. 参考 6 1. DSL 声明验证 <input class="easyui-validatebox"

JaveWeb 公司项目(4)----- Easyui的表单验证

前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所以写一篇博文将这个过程记录下来,一方面是可以记录自己的工作过程,以后看起来方便,一方面也希望可以帮助到有需要求的人 Easyui有一个专门为表单验证设计的样式,首先我们将Form表中的Textbox模式改为Validatebox,更改之后输入框会有一些变化,从圆润变得相对方正一些,

Day17 表单验证、滚动菜单、Django

一.表单验证的两种实现方式 1.DOM绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证(DOM绑定)</title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ wid

easyui 表单提交前的 confirm 处理

最近学习用 easyui,异步提交表单是遇到一个小问题 $('#fModiDetail').form('submit',{ url:'...', onSubmit:function(){ if($(this).form('validate')){ return $.messager.confirm('?','确定要保存吗?', function(r){ return r; }); success:function(data){ //... }; 以上代码在表单验证成功后,确认对话框尽管也会弹出来