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 相关文章推荐
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 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 面向对象 final类与final方法
2010/05/05 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python语言快速上手学习方法
2018/12/14 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python中的流程控制详解
2021/02/18 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
财务信息服务专业自荐书范文
2014/02/08 职场文书
产品质量承诺书范文
2014/03/27 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
公司年会开场白
2015/06/01 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL