3344

最新推荐文章于 2022-01-09 23:13:49 发布

原创最新推荐文章于 2022-01-09 23:13:49 发布 · 6.8k 阅读

0 ·

CC 4.0 BY-SA版权

javaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种利用jQuery实现的前端输入验证方法，并通过添加特定样式来指示输入状态的有效性。通过设置input元素的validation属性，可以指定验证规则及自定义参数，从而在失去焦点时触发验证过程。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery/jquery-1.8.3.js"></script>

<style type="text/css">

</style>
<script type='text/javascript'>
$(function(){
var submitFlag = true;
//针对input类型的元素的校验器
var inputs = $(":input");
//遍历该元素集
$.each(inputs,function(i){
    // 如果该元素含有validation属性
   if (inputs[i].validation){
    $('#'+inputs[i].id).bind('focus',function(){
      $('#'+inputs[i].id).removeClass('errorValid');
     })
    // 设置该元素的blur动作        用于触发校验器
    $('#'+inputs[i].id).bind('blur',function(){
       // 获取该元素的validation属性
       var param = $(this).attr('validation');
       // ******将该属性解析并拼接成新的后台处理参数   start******
       var params = param.split(";");
       var paramnew ="";
       $.each(params,function(j){
         var si = params[j].indexOf("(");
         var ei = params[j].indexOf(")");
         var param1 = params[j].substring(si+1,ei);
         var param2 = param1.split(",");
         var paramSt = params[j].substring(0,si)+"|";
         $.each(param2,function(k){
           if (k == param2.length-1){
               paramSt = paramSt+param2[k];
           }else{
               paramSt = paramSt+param2[k]+ "|";
           }
         })
         if (j == params.length-1){
           paramnew = paramnew+paramSt;
         }else{
             paramnew = paramnew+paramSt+"&";
         }
        })
        // ******将该属性解析并拼接成新的后台处理参数   end******
     //触发后台校验方法
//     validJS.exist($(this).val()+"@"+paramnew,{
       // 校验回调
//       callback:function(str) {
//        if (false == str){
          //校验失败   则飘红并设置全局提交变量为false
//          $('#'+inputs[i].id).addClass('errorValid');
//         }
//        submitFlag = str;
//        }
//      })
   alert($(this).val()+"@"+paramnew);
    })
   }
});
})

</script>
</head>
<body>

<input type="text" id="text1" name="text1" validation="idValidator(dsawds,2222);nameValidator(zhangsan)"/>
<input type="button" value="校验" id="b2" onclick="c2()"/>
<input type="text" id="text2" name="text2" validation="nameValidator,zhangsan"/>
</body>
</html>