js验证模型自我实现

最新推荐文章于 2024-11-05 12:10:18 发布

weixin_34121304

最新推荐文章于 2024-11-05 12:10:18 发布

阅读量84

点赞数

文章标签： xhtml c# javascript ViewUI

市面上有很多表单验证的框架，教我们怎么验证表单的数据提交，说实话也真的很简单，但是我们会有一种感觉我们要是离开了这些框架的时候，我们有时候会束手无策，然后js验证写的很不规范，没有一套比较好的模式，那我写这篇的目的就是：我们自己构建js验证应该是什么样子的，来慢慢看一下。
假设我们现在写一个登录的页面（这可能是最简单的数据提交了哦），html页面会有一个用户名和一个密码的文本框让我们用户输入自己的用户名和密码，我们肯定是要判断用户名和密码是否为空，很明显这样的js验证判断是放在onblur事件里面触发，html代码如下：

View Code

< li >
             < label for ="email" >
                用户名：
             </ label >
             < input name ="email" type ="text" id ="email" maxlength ="50" onblur ="return ValidateHelper.validateStringValueIsEmpty($(this),'通过','不能为空');" />< em ></ em >
         </ li >
         < li >
             < label for ="setPwd" >
                密码：
             </ label >
             < input name ="setPwd" type ="password" id ="setPwd" maxlength ="16" onblur ="return ValidateHelper.validateStringValueIsEmpty($(this),'通过','不能为空');" />< em ></ em >
         </ li >

ValidateHelper是一个对象，一些验证的方法就是在这个对象里面，我们规定一下，js验证用户的输入有两返回结果，一个成功，一个是失败。成功的时候我们输出成功的提示，

失败的时候我们输出失败的提示，对应的两个输出方法：

View Code

    normalMessage: function(jqueryObj, msg) {
         var emObj = $(jqueryObj.parent().find('em')[0]);
        emObj.empty().append(msg);
    },
    warningMessage: function(jqueryObj, msg) {
        ValidateHelper.clearMessage(jqueryObj);
         var emObj = $(jqueryObj.parent().find('em')[0]);
         var spanElement = "<span style='color:#FF4C31;float:left;height:23px;line-height:23px;padding:0 10px 0 35px;'>"
                + msg
                + "</span>";
        emObj.empty().append(spanElement);

    },

还有一个清除提示的方法：

View Code

clearMessage: function(jqueryObj) {
var emObj = $(jqueryObj.parent().find('em')[0]);
emObj.empty();
},

我们已经写了成功和失败提示方法，以及清除提示的方法，这个三个是我们在后面会一直调用的基本方法。

好了，我们写一个验证用户输入不能为空的方法：

View Code

    validateStringValueIsEmpty: function(obj, normalMsg, warningMsg) {
         var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
         if ($.trim(jqueryObj.val()).length == 0) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
             return false;
        }
         else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
             return true;
        }
    },

这个方法会在onblur中被调用的验证方法，里面自然也用到了成功和失败提示方法，以及清除提示的方法。参数有三个，要验证的Dom或者jQuery对象、成功提示信息、失败提示信

息。要是为空就失败，要是不为空就成功。

上面写好的方法在onblur中会触发的，我们提交数据的时候还会用到得哦：

View Code

    initInfo: function() {

         var userName = $('#email');
         var userPwd = $('#setPwd');
         if (!ValidateHelper.validateStringValueIsEmpty(userName, '通过', '不能为空')) {
            userName.focus();
             return null;
        }
         if (!ValidateHelper.validateStringValueIsEmpty(userPwd, '通过', '不能为空')) {
            userPwd.focus();
             return null;
        }

         var userInfo = {
            UserName: userName.val(),
            UserPwd: userPwd.val()
        };

         return userInfo;
    },

    post: function() {

         var userInfo = ValidateHelper.initInfo();
         if (userInfo == null) {
             return;
        }

        $.ajax({
            type: "post",
            dataType: "text",
            url: "Ajax/Module.aspx",
            timeout: 30000,
            data: { UserName: userInfo.UserName, UserPwd: userInfo.UserPwd },
            success: function(data) {
                alert(data.toString());
            }
        });
    }

这边呢要是在提交数据的时候会调用validateStringValueIsEmpty方法，要是返回的是失败是不会真的提交给服务器端得。

那上面的情况是一个最简单的处理不为空的情况，要是我们想验证是否是Email 是否是身份证号码，这些复杂的验证实现如下：

这个类是写了一些验证Email 、身份证号码等等的正则表达式，供我们后面使用，使用方法如下：

    validateStringValueForEmail: function(obj, normalMsg, warningMsg) {
         var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
         if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "通过", "不能为空")) {
            ValidateHelper.warningMessage(jqueryObj, "不能为空");
             return false;
        }
         if (!Validation.isEmail(jqueryObj.val())) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
             return false;
        }
         else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
             return true;
        }
    },
    validateStringValueForCardID: function(obj, normalMsg, warningMsg) {
         var jqueryObj = $(obj);
        ValidateHelper.clearMessage(obj);
         if (!ValidateHelper.validateStringValueIsEmpty(jqueryObj, "通过", "不能为空")) {
            ValidateHelper.warningMessage(jqueryObj, "不能为空");
             return false;
        }
         if (!Validation.isPersonalCard(jqueryObj.val())) {
            ValidateHelper.warningMessage(jqueryObj, warningMsg);
             return false;
        }
         else {
            ValidateHelper.normalMessage(jqueryObj, normalMsg);
             return true;
        }
    },

那到这边是基本可以处理我们的一般的js验证了，可以试试以后用在自己的框架上，我们把自己调试的源码附上：
ASPX ：

View Code

<%@ Page Language= " C# " AutoEventWireup= " true " CodeBehind= " Default.aspx.cs " Inherits= " FormValidateModuleEx._Default " %>

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head runat= " server ">
    <title></title>

    <script src= " js\jquery-1.6.2.min.js " type= " text/javascript "></script>
    <script src= " js\MyValidate.js " type= " text/javascript "></script>
    <%--<script src= " js\CheckPersonCardID.js " type= " text/javascript "></script>--%>
</head>
<body>
    <div>
        <li>
            <label for= " email ">
                用户名：
            </label>
            <input name= " email " type= " text " id= " email " maxlength= " 50 " οnblur= " return ValidateHelper.validateStringValueIsEmpty($(this),'通过','不能为空'); " /><em></em>
        </li>
        <li>
            <label for= " setPwd ">
                密码：
            </label>
            <input name= " setPwd " type= " password " id= " setPwd " maxlength= " 16 " οnblur= " return ValidateHelper.validateStringValueIsEmpty($(this),'通过','不能为空'); " /><em></em>
        </li>
        <li>
            <label for= " setPwd ">
                身份证：
            </label>
            <input name= " cardId " type= " text " id= " cardId " οnblur= " return ValidateHelper.validateStringValueForCardID($(this),'通过','身份证格式不正确'); " /><em></em><%--IdCardValidate($( this), ' 身份证的格式不正确 ');--%>
        </li>
        <li>
            <label for= " setPwd ">
                Email：
            </label>
            <input name= " againEmail " type= " text " id= " againEmail " οnblur= " return ValidateHelper.validateStringValueForEmail($(this),'通过','email格式不正确'); " /><em></em>
        </li>
        <li><input οnclick= " return ValidateHelper.post(); " type= " button " id= " btnPost " /></li>
    </div>
</body>
</html>

js：

View Code