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

网络编程 2024/11/16 佚名

3 2 1

要实现的功能：在做添加学生信息的时候，利用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",
      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",
      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的问题，还需要继续学习，希望这篇文章可以帮到大家。

Jquery,easyUi,表单验证

标签：

Jquery,easyUi,表单验证

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“Jquery插件easyUi实现表单验证示例”

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

暂无“Jquery插件easyUi实现表单验证示例”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

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

Jquery,easyUi,表单验证

js判断手机访问或者PC的几个例子(常用于手机跳转)

解决WordPress使用CDN后博文无法评论的错误

评论“Jquery插件easyUi实现表单验证示例”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

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

Jquery,easyUi,表单验证

js判断手机访问或者PC的几个例子(常用于手机跳转)

解决WordPress使用CDN后博文无法评论的错误

评论“Jquery插件easyUi实现表单验证示例”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存