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

前端技术 2023/09/01 JavaScript

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

最终效果如下图：

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

本文地址：https://www.stayed.cn/item/1364

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案