easyUI之表单验证validate

文本框校验,在easyUI的表单提交中,最常见的就是对文本框的校验,不同类型的输入项需要不同的校验类型,用户可以使用自带的验证类型也可以进行自定义。

1、普通文本框的非空校验


<input id="vv" class="easyui-validatebox" data-options="required:true" />

其中class属性为必写项,如果不写验证框架则会缺少警告样式,required表示该文本框是否为必填项,为true时表示必填。

2、自定义验证类型

有时在进行表单验证时,有些文本框非必填但若输入内容却需要验证内容的合法性,则需要用到validType属性。easyUI提供了验证类型的扩展实现方法如下,使用时与第一种区别不大,只是多了一个validType属性,如

$.extend($.fn.validatebox.defaults.rules,{
    NotEmpty : { // 非空字符串验证。 easyui 原装required 不能验证空格
                validator : function(value, param) {
                    return $.trim(value).length>0;
                }, 
                message : '该输入项为必输项'
            },
    integer : {// 验证整数
                validator : function(value) {
                    return /^[+]?[0-9]+\d*$/i.test(value);
                },
                message : '请输入整数'
            },          
     english : {// 验证英语
                validator : function(value) {
                    return /^[A-Za-z]+$/i.test(value);
                },
                message : '请输入英文'
            },
});

文本框在应用验证框架时,表示非必填,但是填入了以后判断是否为整数,使用方法如下。(常见的校验还有如身份证号、电子邮件等,有需要的可以直接下载easyUI常用校验)

<input id="vv" class="easyui-validatebox" data-options="validType:'integer'" />

3、自定义表单验证函数
有时根据实际需要,当表单验证未通过后需要将焦点定位到第一个未验证通过的文本框,可以通过下列自定义函数实现:

其中id指的是提交的表单的id,因此必须要给提交的表单一个id值。

function validate(id){
    var validate = $("#"+id).form('validate')
    if (!validate) {
       $.messager.alert("确认", '请正确填写表单!',"",function(){
       $("#"+id).find(".validatebox-invalid:first").focus();
                  });
                  return false
              }
              return true
           }

注:若希望查看未通过的文本框的id,则可以调用代码

alert($("#"+id).find(".validatebox-invalid:first").attr("id"));

转载自 https://blog.csdn.net/xiaoxiangshenjian/article/details/52813292

4.easyui给combobox赋值

$('#matchManipulator').combobox('setValue','${equipment.matchManipulator}');
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章