jquery easy ui 验证框架

1. 邮箱验证：<input type="text" validtype="email" required="true" missingMessage="不能为空" invalidMessage="邮箱格式不正确" /><br />
2. 网址验证：<input type="text" validtype="url" invalidMessage="url格式不正确[http://www.example.com]" /><br />
3. 长度验证：<input type="text" validtype="length[8,20]" invalidMessage="有效长度8-20" /><br />
4. 手机验证：<input type="text" validtype="mobile" /><br />
5. 邮编验证：<input type="text" validtype="zipcode" /><br />
6. 账号验证：<input type="text" validtype="account[8,20]" /><br />
7. 汉子验证：<input type="text" validtype="CHS" /><br />
8. 远程验证：<input type="text" validtype="remote['checkname.aspx','name']" invalidMessage="用户名已存在"/>

1. // easyui通用验证规则
2. $.extend($.fn.validatebox.defaults.rules, {
3. date: {
4. validator: function (value) {
5. var reg = /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/;
6. return reg.test(value);
7. },
8. message: '日期格式不正确 YYYY-MM-DD'
9. },
10. integer: {
11. validator: function (value) {
12. var reg = /^[\-\+]?\d+$/;
13. return reg.test(value);
14. },
15. message: '无效的整数'
16. },
17. number: {
18. validator: function (value) {
19. var reg = /^[\-\+]?((([0-9]{1,3})([,][0-9]{3})*)|([0-9]+))?([\.]([0-9]+))?$/;
20. return reg.test(value);
21. },
22. message: '无效的数值'
23. },
24. mobile: {
25. validator: function (value) {
26. alert(123)
27. var reg = /^1[3|4|5|8|9]\d{9}$/;
28. return reg.test(value);
29. },
30. message: '输入手机号码格式不准确.'
31. }
33. })
34. 


1. $.extend($.fn.validatebox.defaults.rules, {
2. ajaxLookName: {//ajax验证
3. validator: function (value) {
4. $.post((baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename"),{houseName:value},function(rec){
5. if(rec.code == "0"){
6. if(rec.data.result){
7. $.fn.validatebox.defaults.rules.ajaxLookName.message='看房团名称已被其它用户定义过，请修改！';
8. return false;
9. }else{
10. return true;
11. }
12. }else{
13. alert(rec.desc);
14. }
15. },"json").error(function(){
16. alert("请求失败！");
17. });
18. },
19. message: ''
20. }
21. })

1. $($($addDiv).find("#addForm")).form('validate')//返回 true false

1. <link rel="stylesheet" href="${baseURL}/js/3rd-plug/easy-ui-1.4.2/themes/black/easyui.css" type="text/css"/>
2. <link rel="stylesheet" href="${baseURL}/js/3rd-plug/easy-ui-1.4.2/themes/icon.css" type="text/css"/>
3. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/jquery.easyui.min.js"></script>
4. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/locale/easyui-lang-zh_CN.js"></script>
5. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/locale/common_validation-zh_CN.js"></script>
6. <script>
7. $.extend($.fn.validatebox.defaults.rules, {
8. datecompare: {
9. validator: function (value) {
10. if($('#regEndtime').val()&&$('#regBegintime').val()>$('#regEndtime').val()){
11. return false;
12. }
13. return true;
14. },
15. message: '报名开始时间不能大于报名截止时间，请修改！'
16. },
17. lookhousedatecompare: {
18. validator: function (value) {
19. if($('#regEndtime').val()&&$('#lookhousetime').val()<$('#regEndtime').val()){
20. return false;
21. }
22. return true;
23. },
24. message: '看房时间必须大于报名截止时间，请修改！'
25. },
26. numcompare: {
27. validator: function (value) {
28. if($('#maxNum').val()&&$('#minNum').val()>$('#maxNum').val()){
29. return false;
30. }
31. return true;
32. },
33. message: '成团最低人数必须不能大于成团最高人数，请修改！'
34. }
35. })
37. </script>
38. <script type="text/javascript" src="${baseURL}/js/3rd-plug/easy-ui-1.4.2/jquery.easyui.min.js"></script>
    

1. $("#lookhousegroupName").on("blur",function(){
2. if($("#lookhousegroupName").hasClass("validatebox-invalid")){
3. return;
4. }
5. $.post((baseURL+"/housemanage/nhousegroupdef/vaild/lookhousename"),{houseName:($(this).val())},function(rec){
6. if(rec.code == "0"){
7. if(rec.data.result){
8. $("#lookhousegroupNameajax").val("0");
9. return false;
10. }else{
11. $("#lookhousegroupNameajax").val("1");
12. }
13. }else{
14. alert(rec.desc);
15. }
16. },"json").error(function(){
17. alert("请求失败！");
18. });
20. })

依赖

• tooltip

用法

从标记创建验证框（validatebox）。

1. <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

使用 javascript 创建验证框（validatebox）。

1. <input id="vv">

1. $('#vv').validatebox({
2. required: true,
3. validType: 'email'
4. });

检查密码和重新输入密码是相同的。

1. // extend the 'equals' rule
2. $.extend($.fn.validatebox.defaults.rules, {
3. equals: {
4. validator: function(value,param){
5. return value == $(param[0]).val();
6. },
7. message: 'Field do not match.'
8. }
9. });

1. <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
2. <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
3. required="required" validType="equals['#pwd']">

验证规则

验证规则是通过使用 required 和 validType 属性来定义的，这里是已经实施的规则：

• email：匹配 email 正则表达式规则。
• url：匹配 URL 正则表达式规则。
• length[0,100]：允许从 x 到 y 个字符。
• remote['http://.../action.do','paramName']：发送 ajax 请求来验证值，成功时返回 'true' 。

要自定义验证规则，重写 $.fn.validatebox.defaults.rules，来定义一个验证函数和无效的信息。例如，定义一个 minLength 验证类型：

1. $.extend($.fn.validatebox.defaults.rules, {
2. minLength: {
3. validator: function(value, param){
4. return value.length >= param[0];
5. },
6. message: 'Please enter at least {0} characters.'
7. }
8. });

现在您可以使用这个 minLength 验证类型来定义一个至少输入5个字符的输入框：

1. <input class="easyui-validatebox" data-options="validType:'minLength[5]'">

属性

方法