js中判斷用戶輸入的值是否為空的簡單實例

2019-11-20 21:24:40

字體：大中小

來源：轉載

供稿：網友

在js中判斷用戶輸入的值是否為空,這是大家用得非常多的. 這沒有什么好寫的. 而我卻寫了. 原因只是自以為是的認為我的這些代碼寫得不錯, 供大家參考一下.

這是摘自的我一個項目的中的用戶注冊頁面.對于大多數人來說,這都幾乎是100%經歷過的.
貼代碼吧,這些代碼都是用js寫的. 不難,很容易看懂. 看的時候,只要區別兩個js類就行了.
前臺頁面代碼:reguser.aspx

<%@ Page language="c#" Codebehind="RegUser.aspx.cs" AutoEventWireup="false" Inherits="Enterprise.Web.RegUser" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
    <head>
        <title>用戶注冊</title>
        <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
        <meta name="CODE_LANGUAGE" Content="C#">
        <meta name="vs_defaultClientScript" content="JavaScript">
        <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
        <LINK rel="stylesheet" type="text/css" href="/CSS/EnterpriseWebSite.css">
        <script src="/js/CommonFunction.js" ></script>
        <script>
            var reg    = {};
            reg.userName    = '';
            reg.password    = '';
            reg.confirmPassword    = '';
            reg.question    = '';
            reg.answer    = '';
            reg.url    = '';
            reg.sex    = 1;
            reg.email    = '';
            reg.tel    = '';
            reg.mobile    = '';
            reg.qq    = '';
            reg.address    = '';
            reg.postalcode    = '';
            reg.form    = null;

            function btnSubmit_onclick()
            {
                reg.form    = document.forms[0];
                var comFun    = new commonFunction();

                if(!comFun.checkIsEmpty(reg.form))
                {
                    return false;
                }

                if(comFun.$getElementById('txtPassword').value!=comFun.$getElementById('txtConfirmPassword').value)
                {
                    alert('兩次密碼輸入不一致');
                    comFun.$getElementById('txtConfirmPassword').select();
                    return false;
                }

                reg.userName    = comFun.$getElementById('txtUserName');
                reg.password    = comFun.$getElementById('txtPassword');
                reg.question    = comFun.$getElementById('txtQuestion');
                reg.answer        = comFun.$getElementById('txtAnswer');
                reg.url            = comFun.$getElementById('txtUrl');
                reg.email        = comFun.$getElementById('txtEmail');
                reg.tel            = comFun.$getElementById('txtTel');
                reg.mobile        = comFun.$getElementById('txtMobile');
                reg.qq            = comFun.$getElementById('txtQQ');
                reg.address        = comFun.$getElementById('txtAddress');
                reg.postalcode    = comFun.$getElementById('txtPostalcode');

                var es    = comFun.$getElementsByName('sex');
                var eL    = es.length;
                for(var i=0; i<eL; i++)
                {
                    var    e    = es[i];
                    if(e.checked)
                    {
                        reg.sex    = e.value;
                        break;
                    }
                }

                RegUser.Reg(reg.userName.value, reg.password.value, reg.question.value, reg.answer.value, reg.url.value, reg.sex.value, reg.email.value, reg.tel.value, reg.mobile.value, reg.qq.value, reg.address.value, reg.postalcode.value, callback_Reg);
            }

            function callback_Reg(res)
            {
                var rv    = res.value;
                if(rv)
                {
                    alert('注冊成功!');
                    window.location.href='/Default.aspx';
                }
                else
                {
                    alert('有錯誤發生,注冊失敗!有可能是用戶名或者域名被別人注冊過了！');
                }
            }

            // 檢測用戶名的域名是否被其它用戶注冊過了
            function checkIsRegistered(obj, errorS, t)
            {
                var v    = obj.value;

                var rv    = RegUser.CheckIsRegistered(v, t).value;
                if(rv)
                {
                    alert(errorS);
                    obj.select();
                    return false;
                }
            }
        </script>
    </head>
    <body MS_POSITIONING="GridLayout">
        <form id="Form1" method="post" runat="server">
            <table width="98%" border="0" align="center" cellpadding="3" cellspacing="0">
                <tr>
                    <td width="16%"><div align="right">用戶名:</div>
                    </td>
                    <td width="84%"><input type="text" id="txtUserName" onblur="checkIsRegistered(this, '該用戶名已經被注冊,請使用其它的!', 1)" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty="用戶名不能為空!" errorSForValidate="匹配出錯!以字母開頭，允許3-16字節，允許字母數字下劃線以及許可的安全符號!" validatePattern="/^[a-zA-Z][a-zA-Z0-9_$%]{2,15}$/" title="用戶名必須填寫!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">密碼:</div>
                    </td>
                    <td><input type="password" id="txtPassword" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty="密碼不能為空!" errorSForValidate="匹配出錯!要求3-16字節，允許字母數字下劃線以及許可的安全符號!!" validatePattern="/^[a-zA-Z0-9_$%]{2,15}$/" title="密碼必須填寫!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">確認密碼:</div>
                    </td>
                    <td><input type="password" id="txtConfirmPassword" isRequired="true" errorSForEmpty="確認密碼不能為空!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">密碼提示問題:</div>
                    </td>
                    <td><input type="text" id="txtQuestion" maxlength="50" isRequired="true" isValidate="true" errorSForEmpty="密碼提示問題沒有填寫!" errorSForValidate="長度必須在8-50個字之間且不得有空格!" validatePattern="http://S{8,50}/" title="密碼提示問題必須填寫!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">密碼問題答案:</div>
                    </td>
                    <td><input type="text" id="txtAnswer" maxlength="50" isRequired="true" isValidate="true" errorSForEmpty="密碼問題答案沒有填寫!" errorSForValidate="長度必須在8-50個字之間且不得有空格!" validatePattern="http://S{8,50}/" title="密碼問題答案必須填寫!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">站點Url:</div>
                    </td>
                    <td><input type="text" id="txtUrl" onblur="checkIsRegistered(this, '該Url已經被注冊,請使用其它的!', 2)" maxlength="20" isRequired="true" isValidate="true" errorSForEmpty="站點Url不能為空!" errorSForValidate="站點Url格式不對!" validatePattern="/^[a-zA-Z0-9]{1,20}$/" title="站點Url必須填寫!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">性別:</div>
                    </td>
                    <td><input type="radio" id="boy" name="sex" value="1" checked>男  <input type="radio" id="girl" name="sex" value="0">女</td>
                </tr>
                <tr>
                    <td><div align="right">Email:</div>
                    </td>
                    <td><input type="text" id="txtEmail" isValidate="true" errorSForValidate="Email格式不正確!" validatePattern="/^.+/@(/[?)[a-zA-Z0-9/-/.]+/.([a-zA-Z]{2,3}|[0-9]{1,3})(/]?)$/"></td>
                </tr>
                <tr>
                    <td><div align="right">固定電話:</div>
                    </td>
                    <td><input type="text" id="txtTel" isRequired="true" isValidate="true" errorSForEmpty="固定電話不能為空!" errorSForValidate="固定電話格式不對!請使用0592-5555555的格式!" validatePattern="/^(/d{3}-|/d{4}-)?(/d{8}|/d{7})$/" title="固定電話必須填寫!"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right">移動電話:</div>
                    </td>
                    <td><input type="text" id="txtMobile" isValidate="true" errorSForValidate="移動電話格式不正確!" validatePattern="/^1/d{10}$/"></td>
                </tr>
                <tr>
                    <td><div align="right">QQ:</div>
                    </td>
                    <td><input type="text" id="txtQQ" isValidate="true" errorSForValidate="QQ格式不正確!" validatePattern="/^[1-9]*[1-9][0-9]*$/"></td>
                </tr>
                <tr>
                    <td><div align="right">住址:</div>
                    </td>
                    <td><input type="text" id="txtAddress"></td>
                </tr>
                <tr>
                    <td><div align="right">郵編:</div>
                    </td>
                    <td><input type="text" id="txtPostalcode" maxlength="6" isValidate="true" errorSForValidate="郵編不正確!" validatePattern="/^/d{6}/"></td>
                </tr>
                <tr>
                    <td><div align="right">操作:</div>
                    </td>
                    <td><input type="button" value="注冊" id="btnSubmit" onclick="btnSubmit_onclick()">  <input type="reset" value="重置"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

在上面的代碼中,有包含了一個CommonFunction.js文件,下面這是他的內容:

復制代碼代碼如下:

/***********************************************************
*
*    公共js函數
*
***********************************************************/
function commonFunction()
{
    // check value is null or empty
    this.checkIsEmpty    = function(obj)
    {
        var flag    = true;
        for(var i=0; i<obj.length; i++)
        {
            var e    = obj.item(i);
            if(e.isRequired)
            {    
                if(e.value=='')
                {
                    alert(e.errorSForEmpty);
                    e.focus();
                    flag    = false;
                    break;
                }
            }

            if(e.isValidate)
            {
                if(this.checkValidate(e)==false)
                {
                    alert(e.errorSForValidate);
                    e.select();
                    e.focus();
                    flag    = false;
                    break;
                }
            }
        }

        return flag;
    }

    // check value is validate
    this.checkValidate    = function(e)
    {
        var v    = e.value;
        if(v!='')
        {
            return this.checkReg(e.validatePattern, v);
        }
    }

    // regexp validate
    this.checkReg    = function(pattern, value)
    {
        pattern    = pattern.substring(1, pattern.length-1);
        var reg    = new RegExp(pattern);
        if(!reg.test(value))
        {
            return false;
        }
    }

    // return an Element By id object for what id.
    this.$getElementById    = function(id)
    {
        var e    = document.getElementById(id);

        if(e!='undefined')
        {
            return e;
        }

        return;
    }

    // return an Element By name object for what id.
    this.$getElementsByName    = function(id)
    {
        var e    = document.getElementsByName(id);

        if(e!='undefined')
        {
            return e;
        }

        return;
    }
}