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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
解决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 $_FILES函数详解
2011/03/09 PHP
php判断是否为json格式的方法
2014/03/04 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
PHP云打印类完整示例
2016/10/15 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python的多态性实例分析
2015/07/07 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Django 请求Request的具体使用方法
2019/11/11 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
小区停车场管理制度
2014/01/27 职场文书
法制教育演讲稿
2014/09/10 职场文书
员工评语范文
2014/12/31 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
Redis高并发缓存架构性能优化
2022/05/15 Redis