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 (提供可扩展函数库来做校验)

 

 

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

 

 

 

 

 

 

 

 

 

 

 

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值