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 相关文章推荐
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
js常用代码段收集
Oct 28 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
JQuery操作textarea,input,select,checkbox方法
Sep 02 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
JavaScript制作简单的框选图表
2017/05/15 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
Django开发中复选框用法示例
2018/03/20 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
运动会四百米广播稿
2014/01/19 职场文书
2014年清明节寄语
2014/04/03 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
主题教育活动总结
2014/05/05 职场文书
义和团口号
2014/06/17 职场文书
公司演讲稿开场白
2014/08/25 职场文书
党员反对四风思想汇报范文
2014/10/25 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android