formValidator 学习的一点点滴

<link type="text/css" rel="stylesheet" href="${ctx }/js/formValidator/validator.css" /> 

<script type="text/javascript" src="${ctx }/js/formValidator/formValidator_min.js"></script>
<script type="text/javascript" src="${ctx }/js/formValidator/formValidatorRegex.js" charset="UTF-8"></script>

 

---

 $(document).ready(function(){
     $.formValidator.initConfig({
      validatorgroup:"6",
      formid:"messageFormId",
      //onsuccess:function(){alert('成功提示');return false;},
      onerror:function(msg){alert(msg)}
     });
  $("#messageContent").formValidator({
   validatorgroup:"6",
   onshow:"请输入短信内容",
   onfocus:"短信内容不能为空",
   oncorrect:""
   }).inputValidator({
    min:1,
    onerror:"短信内容不能为空"
   });
     
 });

<form id="messageFormId" action="/message/message!save.action" method="post">
    <textarea
     style="width: 490px; height: 100px; margin-left: -5px; padding: 0px; float: left"
     name="content" id="messageContent"></textarea>
  <div class="label"  id="messageContentTip" style="width:200px;margin-left:80px;"></div>

</form>

 

---

 

 <script type="text/javascript">
        $(document).ready(function() {
            var erro = false;
             $.formValidator.initConfig({ formid: "m", onerror: function(msg) { alert("校验没有通过，具体错误请看错误提示"); erro = false; }, onsuccess: function() { erro = true; return true; } });
                   $("#uname").formValidator({ onshow: "请输入用户", onfocus: "·由<em>字母a～z</em>(不区分大小写)、<em>数字0～9</em>、<em>点</em>、<em>减号</em>或<em>下划线</em>组成<br />"
              + "·只能以<em>数字</em>或<em>字母</em>开头和结尾，例如：beijing.2008<br />"
              + "·用户名长度为<em>4～18</em>个字符", oncorrect: "该用户名可以注册"
            })
              .regexValidator({ regexp: "notempty", datatype: "enum", onerror: "输入不能为空或空格" })
              .inputValidator({ min: 4, max: 18, onerror: "用户名长度为4~18个字符" })
              .regexValidator({ regexp: "^[A-Za-z0-9]{1}[A-Za-z0-9._-]{0,15}[A-Za-z0-9]{1}$", onerror: "只能以字母或数字为开头结尾.中间可以有减号下划线点组成" })
              .ajaxValidator({
                  type: "get",
                  url: "ashx/shopzc.ashx?tj=0",
                  datatype: "json",
                  success: function(data) {
                      if (data == "1") {
                          return true;
                      }
                      else {
                          return false;
                      }

                  },
                  error: function() { alert("服务器没有返回数据，可能服务器忙，也可能是非法注册.请重试"); },
                  onerror: "该用户名不可用，请更换用户名",
                  onwait: "正在对用户名进行合法性校验，请稍候..."
              });
    $("#Button1").click(function() {
               
                alert(erro);
                if (erro == true) {

                    $.ajax({
                        type: "post",
                        url: "ashx/shopzc.ashx",

                        data: "tj=1&uname=" + $("#uname").val() + "&pwd=" + $("#pwd1").val() + "&email=" + $("#email").val() + "&question=" + $("#question").val()
                    + "&answer=" + $("#answer").val() + "&youname=" + $("#youname").val()
                    ,
                        error: function() { alert("dfs") },
                        success: function(xml) {
                            alert(xml);

                        } /*success end*/
                    })/*ajax end*/
                }
            })/*zc_tj end*/
        });

     </script>
<form id ="m" method="get" action="">

<div class ="zch">
        <div class ="zcl1"  ><i>*</i>用户名</div>
        <div class ="zcl2"><input id="uname" type="text" maxlength="18"/></div>
        <div class ="zcl3"><div id="unameTip"  ></div></div>
    </div>
<div class ="zchf"> <input type="submit" name="zc_tj" id="zc_tj" value="提      交" /><input
             id="Button1" type="button" value="button" /></div>
</form>

 

---

---

 

 

//加载jQuery类库
<script src="jquery_last.js" type="text/javascript"></script>
//加载插件的样式库，如果你是自动构建提示层，请加载validatorAuto.css
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>
//加载插件
<script src="formValidator.js" type="text/javascript"></script>
//加载扩展库
<script src="formValidatorRegex.js" type="text/javascript"></script>

 

---

 

---

 

目前支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库） 、functionValidator （提供可扩展函数库来做校验）

 

 

具体内容可以参考帮助文档