easyui的validtebox使用

ゞ浴缸里的玫瑰 2022-04-12 14:10 225阅读 0赞

作为后端编程人员来说，掌握一定的js知识是有必要的。在写页面的过程中难免会遇到参数的校验问题。尽量不要使用if判断进行控制，if判断控制请求提交与否，经常会碰见全局变量的问题，全局变量的问题解决不好，会出现各种各样的问题。  
easyui的validatebox校验框架，配置简单，使用方便。对于后端人员来说，是非常好的一个开源框架。

下面我分两部分进行讲解  
1 .引入easyui框架  
2 .使用easyui框架

1 .引入easyui框架  
easyui框架一共包含5个文件  
(1) .easyui.css  
(2) .icon.css  
(3) .validatebox.css  
(4) .jquery.easyui.min.js  
(5) .easyui-lang-zh\_CN.js  
将文件引入对应的jsp或者html文件中  
2 .使用easyui框架  
(1) .编写js脚本，引入对应的工程

$.extend($.fn.validatebox.defaults.rules, {
        equals: {
    		validator: function(value,param){
    			return value == $(param[0]).val();
    		},
    		message: 'Field do not match.'
        }
    });

其中的equals代码片段就是我们定义好的一个校验器。我们可以在function中书写我们自己的校验代码，返回false就是参数校验失败，返回true就是校验成功，非常简单。

校验器定义好之后，我们将定义好的校验器加在我们需要校验的代码块上  
比如:

上面的代码就是将之前定义好的equals校验器引入到了代码中。解释一下\[6,20,‘输入信息有误’\]  
我们定义好的校验器的方法体中一个value，一个param。  
\[6,20,‘输入信息有误’\]是一个数组，用param表示，param\[0\]就是6,param\[1\]就是1，param\[3\]是错误提示信息。通过这种方式，我们可以将我们的校验信息传入校验，是不是很方便。  
required="true"是参数必填的意思。写上此配置之后，用户的鼠标在相应的代码上悬浮时，会对用户提示信息，提示信息可以自定义。

之后，也是比较关键的一步，我们的参数都校验过了，有的参数校验成功，返回true，有的返回了false。只要有一个false，我们就不能提交请求  
使用下面代码控制  
$("\#abcForm").( ‘validate’ );  
其中abcForm是表单的id值，validate会对被easyui-validatebox修饰的代码块进行校验，如果发现有校验失败的参数，就会组织表单提交。