Sep 1

struts2实践- 结合jquery的纯客户端js表单校验 不指定

chirs , 11:58 , 歪布天地 » jQuery , 评论(0) , 引用(0) , 阅读(4735) , Via 本站原创 | |
SSH是目前使用最多的系统集成架构,其中struts2框架也是目前最火,但是发现其对校验的支持不是很好,主要体现在如下几点
1.灵活性差
只有theme为xhtml和css_xhtml的时才能够启用纯客户端的js验证.
一般用户对页面UI表示都有一定的要求,当theme为xhtml或css_xhtml的时候会导致页面的排版和用户的UI要求不一致,而且几乎无法解决该问题.并且struts2纯js客户端的错误信息是利用动态添加一个tr来显示的.这就导致如果我想把错误和表单显示在同一行,利用struts2的客户端验证就很难做到.
2.默认支持的校验类型比较少.
struts2默认只支持比较少的几种验证类型例如
* required validator
* requiredstring validator
* stringlength validator
* regex validator
* email validator
* url validator
* int validator
* double validator
date和表达式验证都不支持.这给使用造成了一定的麻烦.
3.不支持客户端定制的js验证.
针对如上几点郁闷的地方,我在网上寻找了很久终于发现了一个比较好js客户端验证的框架
jquery-validate
该验证框架基于jquery这个js框架,利用jquery特性实现客户端的js校验,主要特点如下
1.支持基于表单类似声明式的js验证详细例子如下:
$("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minLength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minLength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      username: {
        required: "Please enter a username",
        minLength: "Your username must consist of at least 2 characters"
      },
      password: {
        required: "Please provide a password",
        minLength: "Your password must be at least 5 characters long"
      },
      confirm_password: {
        required: "Please provide a password",
        minLength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same password as above"
      },
      email: "Please enter a valid email address",
      agree: "Please accept our policy"
    }
  });

2.内置多种基本校验的类型(包括与ajax结合的服务器断校验)
required,remote(ajax服务器端校验器),minlength,maxlength,rangelength,min,max,range,email,url,date,,dateISO,dateDE,number,numberDE,digits,creditcard,accept,equalTo
3.支持自定义校验类型.
可以通过
$.validator.addMethod("phone", function(value) {
return validatePhone(value);
}, 'Please enter correct format for referee phone!');

添加自己的校验器
4.支持多种校验器的声明方式.
1).利用函数声明
请参考1点
2).结合控件属性声明
<input  type="radio" id="gender_male" value="m" name="gender" validate="required:true" />

3).结合控件的class属性声明
<textarea id="ccomment" name="comment" class="required">

这几种声明方式可以按照实际需要结合使用大大提高了灵活性.
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]