easyui的validtebox使用_easyui validate-CSDN博客

本文链接：https://blog.csdn.net/qq_39839075/article/details/84780464

作为后端编程人员来说，掌握一定的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就是校验成功，非常简单。

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

<input name="loginName" value=" " id="loginName" required="true" validType="equals[6,20,'输入信息有误']" />

上面的代码就是将之前定义好的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修饰的代码块进行校验，如果发现有校验失败的参数，就会组织表单提交。