博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
easyui表单多重验证,动态设置easyui控件
阅读量:5327 次
发布时间:2019-06-14

本文共 4609 字,大约阅读时间需要 15 分钟。

要实现的功能:在做添加学生信息的时候,利用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 2 

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

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

1 2 

 

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

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

1 2 

 

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

 

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

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

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

1 
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,所以这个地方就得不到想要的效果了。

参考:

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

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 

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

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

1 

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 2     学号:3     4         5     6 

最终效果如下图:

OK!!!

 

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

 

 

 

转载于:https://www.cnblogs.com/chiangchou/p/validatebox.html

你可能感兴趣的文章
String比较
查看>>
Django之Models
查看>>
CSS 透明度级别 及 背景透明
查看>>
Linux 的 date 日期的使用
查看>>
PHP zip压缩文件及解压
查看>>
SOAP web service用AFNetWorking实现请求
查看>>
Java变量类型,实例变量 与局部变量 静态变量
查看>>
mysql操作命令梳理(4)-中文乱码问题
查看>>
Python环境搭建(安装、验证与卸载)
查看>>
一个.NET通用JSON解析/构建类的实现(c#)
查看>>
Windows Phone开发(5):室内装修 转:http://blog.csdn.net/tcjiaan/article/details/7269014
查看>>
详谈js面向对象 javascript oop,持续更新
查看>>
关于这次软件以及pda终端的培训
查看>>
jQuery上传插件Uploadify 3.2在.NET下的详细例子
查看>>
如何辨别一个程序员的水平高低?是靠发量吗?
查看>>
新手村之循环!循环!循环!
查看>>
正则表达式的用法
查看>>
线程安全问题
查看>>
SSM集成activiti6.0错误集锦(一)
查看>>
个人作业
查看>>