Jquery插件easyUi实现表单验证示例


Posted in Javascript onDecember 15, 2015

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

最终效果如下图:

Jquery插件easyUi实现表单验证示例

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

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

//学号格式只能为数字  ****//这里没有问题****
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
   //param参数为textarea的id值
   validator: function (value, param) {
     //将从后台获取的json数据先放入textarea,再获取出来后解析成数组
     var snumbers = $.parseJSON($(param)[0].val());
     for(var i=0;i < snumbers.length;i++){
       if(value == snumbers[i]){ //如果学号有重复返回false
         return false;
       }
     }
     return true;
 }

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

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

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

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

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

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

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

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

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

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

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

<input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
上面这样在jQuery里设置easyui控件后,没有效果,后来百度了下,动态添加easy控件后需要重新渲染下,如下:
//设置easyui控件
$("#addSnumber").attr("class", "easyui-textbox");
//设置验证属性
$("#addSnumber").attr("validType","snumber['#snumber']");
//解析所有页面
$.parser.parse();

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

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

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

后经百度后得知:

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

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

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

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

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

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

//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在验证函数里加载数据,加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},

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

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

//验证表单
var validate = $("#editStuForm").form("validate");
if(!validate){
$.messager.alert("消息提醒","请检查你输入的数据!","warning");

return;
} else{

//提交
}

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

<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里面:

<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验证重复和格式,多重验证

//学号格式只能为数字
number: {//value值为文本框中的值
  validator: function (value) {
    var reg = /^[0-9]*$/;
    return reg.test(value);
  },
  message: '学号格式不正确.'
},
//验证学号不能重复
snumber: {
  validator: function (value) {
    var flag = true;
    $.ajax({
      type: "post",
      async: false,
      url: "/sims/StudentServlet?method=AllSNumber",
      success: function(data){//在验证函数里加载数据,加载过来后判断输入的值
        var snumbers = $.parseJSON(data);
        for(var i=0;i < snumbers.length;i++){
          if(value == snumbers[i]){
            flag = false;
            break;
          }
        }
      }
    });
    
    return flag;
  },
  message: '学号重复'
},
<tr>
  <td>学号:</td>
  <td>
     <input id="addSnumber" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="snumber" data-options="required:true, validType:['snumber', 'number'], missingMessage:'请输入学号'" />
  </td>
</tr>

最终效果如下图:

Jquery插件easyUi实现表单验证示例

OK!!!
大多都是自己多次尝试总结的,很多东西还不明白其中的原理,我想应该是easyui.min.js的问题,还需要继续学习,希望这篇文章可以帮到大家。

Javascript 相关文章推荐
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
vue注册组件的几种方式总结
Mar 08 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
Vue实现多页签组件
Jan 14 Vue.js
解决WordPress使用CDN后博文无法评论的错误
Dec 15 #Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 #Javascript
jQuery进行组件开发完整实例
Dec 15 #Javascript
JavaScript组件开发完整示例
Dec 15 #Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 #Javascript
JavaScript为事件句柄绑定监听函数实例详解
Dec 15 #Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 #Javascript
You might like
十天学会php之第五天
2006/10/09 PHP
PHP 表单提交给自己
2008/07/24 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python实现简单socket通信的方法
2016/04/19 Python
Python处理中文标点符号大集合
2018/05/14 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
数据库什么时候应该被重组
2012/11/02 面试题
红头文件任命书范本
2014/06/05 职场文书
教师暑期培训感言
2014/08/15 职场文书
2014年个人委托书范本
2014/10/13 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2014年信用社工作总结
2014/11/25 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
社区宣传标语口号
2015/12/26 职场文书
辞职申请书范本
2019/05/20 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript