easyui表单多重验证,动态设置easyui控件

要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字

最终效果如下图:

但在做这个的过程中,遇到了一系列的问题:

扩展validatebox的验证方法,最开始的验证代码如下:

 1 //学号格式只能为数字   ****//这里没有问题****
 2 number: {//value值为文本框中的值
 3     validator: function (value) {
 4         var reg = /^[0-9]*$/;
 5         return reg.test(value);
 6     },
 7     message: ‘学号格式不正确.‘
 8 },

 1 //验证学号不能重复
 2 snumber: {
 3       //param参数为textarea的id值
 4       validator: function (value, param) {
 5           //将从后台获取的json数据先放入textarea,再获取出来后解析成数组
 6           var snumbers = $.parseJSON($(param)[0].val());
 7           for(var i=0;i < snumbers.length;i++){
 8               if(value == snumbers[i]){ //如果学号有重复返回false
 9                  return false;
10              }
11          }
12          return true;
13  }

在这里先只做学号重复验证,因为有其它一些问题,也遇到了一些问题:

表单开始是这样写的,validType属性写在data-options属性里:

1 <input id="addSnumber"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true,validType:‘snumber[#snumbers]‘, missingMessage:‘请输入学号‘" />
2 <textarea id="snumbers" style="display: none"></textarea>

这里就有一个问题就是:这样写Firebug会报错,因为#snumbers需要用引号引起来,但是直接加引号会出错,这里相当于是三重引号,网上查了很多资料,有的用转义,都行不通,我猜想这里是easyui解析的问题,除非更改easyui的源码。有大神知道的还请不吝赐教。

然后将validType属性放在外面,验证成功,如下:

1 <input id="addSnumber" validType="snumber[‘#snumbers‘]" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:‘请输入学号‘" />
2 <textarea id="snumbers" style="display: none"></textarea>

然后新的问题又出现了,如何把学号格式验证加进去?

我是这样写的,不成功,感觉还是三重引号的问题,Firebug报错,各种方法都试了,无效:

1 <input id="addSnumber" validType="[‘snumber[‘#snumbers‘]‘, ‘number‘]" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, missingMessage:‘请输入学号‘" />
2 <textarea id="snumbers" style="display: none"></textarea>

********************************************************先告一段落****************************************************************

然后我试了另一种方式,动态加载easyui控件,但是两个验证放在一起还是会有同样的问题,在这里我肯定是easyui解析的问题了,也就不纠结了。

这里遇到两个问题,一个是怎么将ajax返回来的数据放进validType属性中,就是不用另一个textarea来存数据,未解决......求指导

第二个是动态设置easyui控件无效的问题,简单说下,代码如下:

1 <input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
1 //设置easyui控件
2 $("#addSnumber").attr("class", "easyui-textbox");
3 //设置验证属性
4 $("#addSnumber").attr("validType","snumber[‘#snumber‘]");

上面这样在jQuery里设置easyui控件后,没有效果,后来百度了下,动态添加easy控件后需要重新渲染下,如下:

1 //设置easyui控件
2 $("#addSnumber").attr("class", "easyui-textbox");
3 //设置验证属性
4 $("#addSnumber").attr("validType","snumber[‘#snumber‘]");
5 //解析所有页面
6 $.parser.parse();

这样就可以了;但是查看easyui的api后发现可以只解析某个dom元素。

下面这段代码达不到效果:

1 //设置easyui控件
2 $("#addSnumber").attr("class", "easyui-textbox");
3 //设置验证属性
4 $("#addSnumber").attr("validType","snumber[‘#snumber‘]");
5 //解析指定元素
6 $.parser.parse($("#addSnumber"));

后经百度后得知:

parser只渲染$("#addSnumber")的子孙元素,并不包括$("#addSnumber")自身,而它的子孙元素并不包含任何Easyui支持的控件class,所以这个地方就得不到想要的效果了。

参考:jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

所以想要渲染单个元素要像下面这样写:

1 //设置easyui控件
2 $("#addSnumber").attr("class", "easyui-textbox");
3 //设置验证属性
4 $("#addSnumber").attr("validType","snumber[‘#snumber‘]");
5 //解析指定元素,找它的父元素
6 $.parser.parse($("#addSnumber").parent());

******************************************************OK*********************************************

回到之前的问题,验证学号不能重复和学号格式。

最后网上查阅了各种资料,发现我的思路不行,因为我是先将所有学号加载到客户端再验证,但这样有一个问题,如果多个用户在这期间添加了学号就有可能导致重复。

所以最后将获取所有学号的操作放到验证函数里,如下:

 1 //验证学号不能重复
 2 snumber: {
 3     validator: function (value) {
 4         var flag = true;
 5         $.ajax({
 6             type: "post",
 7             async: false,
 8             url: "/sims/StudentServlet?method=AllSNumber",
 9             success: function(data){//在验证函数里加载数据,加载过来后判断输入的值
10                 var snumbers = $.parseJSON(data);
11                 for(var i=0;i < snumbers.length;i++){
12                     if(value == snumbers[i]){
13                         flag = false;
14                         break;
15                     }
16                 }
17             }
18         });
19
20         return flag;
21     },
22     message: ‘学号重复‘
23 },

这样写的好处是:可以实时加载数据来判断,在提交表单时也会再加载数据来判断一次,而且不需要传入参数,就不会再有三重引号的问题了;但有一个缺点就是会很多次请求数据库,服务器资源消耗大。

提交表单时加入下面这句,验证表单:

1 //验证表单
2 var validate = $("#editStuForm").form("validate");
3 if(!validate){
4   $.messager.alert("消息提醒","请检查你输入的数据!","warning");
5   return;
6 } else{
7   //提交
8 }

这里有另一个问题,表单代码如下:

1 <input id="addSnumber"  class="easyui-textbox" validType="‘snumber‘, ‘number‘" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true,  missingMessage:‘请输入学号‘" />

这里将validType属性放在data-options外面后,不能验证,Firebug会报错!!!

最后将其放到data-options里面:

1 <input id="addSnumber"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:[‘snumber‘, ‘number‘], missingMessage:‘请输入学号‘" />

OK,都行了,两个验证都可以了!!!

总结:easyui验证重复和格式,多重验证

 1 //学号格式只能为数字
 2 number: {//value值为文本框中的值
 3     validator: function (value) {
 4         var reg = /^[0-9]*$/;
 5         return reg.test(value);
 6     },
 7     message: ‘学号格式不正确.‘
 8 },
 9 //验证学号不能重复
10 snumber: {
11     validator: function (value) {
12         var flag = true;
13         $.ajax({
14             type: "post",
15             async: false,
16             url: "/sims/StudentServlet?method=AllSNumber",
17             success: function(data){//在验证函数里加载数据,加载过来后判断输入的值
18                 var snumbers = $.parseJSON(data);
19                 for(var i=0;i < snumbers.length;i++){
20                     if(value == snumbers[i]){
21                         flag = false;
22                         break;
23                     }
24                 }
25             }
26         });
27
28         return flag;
29     },
30     message: ‘学号重复‘
31 },

1 <tr>
2     <td>学号:</td>
3     <td>
4         <input id="addSnumber"  class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:[‘snumber‘, ‘number‘], missingMessage:‘请输入学号‘" />
5     </td>
6 </tr>

最终效果如下图:

OK!!!

大多都是自己多次尝试总结的,很多东西还不明白其中的原理,我想应该是easyui.min.js的问题。如果有哪些地方不对,而且还有些问题不懂,望大神不吝赐教!!

时间: 2024-12-26 13:39:47

easyui表单多重验证,动态设置easyui控件的相关文章

angluar 表单的验证 动态数据项表单验证

1.动态生成的表单的验证 注意:代码中的“from”为form标签的name属性的名称 ,如:  <form name="form" ></form>另,代码中需要注意的点 1.input框的name属性:name="{{'PlanTitle'+$index}}" 2.如果使用ng-message,form['PlanTitle'+$index] 3.如果是使用ng-style:form['PlanTitle'+$index].$error.

基于Extjs的web表单设计器 第四节——控件拖放

接着上一节介绍控件拖放的设计. 通过前面的介绍知道,我们的区域类型的容器控件有三种:Card.Table.Mixed. Card 可以支持几乎所有的常用控件,包括:文本TextField.多文本TextArea.数字NumberField.金额NumberField.日期DateField.下拉树NetDropDown.按钮Button.复选框CheckBox.单选框Radio:Table可以支持的常用控件比Card稍微少一点,它不支持button类型的控件以及多文本TextArea控件:Mix

easyui取消表单时验证,提交时统一验证

1.设置表单不验证 <form id="ff" class="easyui-form" method="post" data-options="novalidate:true"></form> 2.表单提交时统一验证$('#ff').form('submit',{                onSubmit:function(){                    return $(this).

ajax提交表单无法验证easyui的验证选项(比如required等)

在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情. 解决办法:使用jquery中ajax的beforeSend事件(这需要与easyui框架协同使用),例如:   submitForm:function(formId,url){ var formData = $(formId).form('getValues'); // 获取表单数据 $.ajax({ type:'POST', url:url, data:{for

easyui表单插件-包括日期时控件-列表

← jQuery EasyUI 表单插件 – Numberspinner 数值微调器 jQuery EasyUI 表单插件 - Timespinner 时间微调器  jQuery EasyUI 插件 扩展自 $.fn.spinner.defaults.通过 $.fn.timespinner.defaults 重写默认的 defaults. 时间微调器(timespinner)是基于微调器(spinner)创建的.它与数值微调器(numberspinner)相似,但是它只显示时间值.时间微调器(t

雷林鹏分享:jQuery EasyUI 表单 - 创建树形下拉框

jQuery EasyUI 表单 - 创建树形下拉框 树形下拉框(ComboTree)是一个带有下列树形结构(Tree)的下拉框(ComboBox).它可以作为一个表单字段进行使用,可以提交给远程服务器. 在本教程中,我们将要创建一个注册表单,带有 name.address.city 字段.city 字段是一个树形下拉框(ComboTree)字段,在里面用户可以下拉树面板(tree panel),并选择一个特定的城市. 创建表单(Form) title="Register" butto

动态设置easyui datagrid URL

动态设置easyui datagrid URL$('#tt').datagrid({url:'website/jsp/servlet',        queryParams:{method:'xx', Id:IDValue }        });

HTML5表单及其验证

随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其API,方便我们做更复杂的应用,而不用借助其它Javascript框架,先说下表单的几个基本知识点: 表单仍是以<form>元素作为容器,我们可在其中设置基本的提交特性: 当用户提交页面时,表单仍然向服务器发送表单控件的值: 之前老版本中的表单控件,如text radio checkbox等等,都可以按

Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo

二.添加自定义验证演示       Validform验证提示大多都是在输入框或下拉框的右边或下面.感觉就是不美观,特别是表单字段少的时候,这种在相应对象旁边的提示就没必要了,      它会给人一种不友好的感觉(只是自己的感觉).所以下面写了三种添加演示,希望大家能给出建议,以免下次用起来纠结,不知道用哪种好.        表单验证插件是我们经常使用的Validform_v5.3.2_min.js.先上添加1演示的表单验证js代码,这里我设置了点击提交按钮后才验证.其他添加演示的区别不大,详