A simple instance in js that determines whether a value entered by the user is null

  • 2020-03-30 01:03:04
  • OfStack

In js to determine whether the value of the user input is null, which is a lot of people use. There is nothing to write. But I wrote. The reason is that I think my code is good, for your reference.

This is an excerpt from the user registration page of one of my projects. For most people, this is almost 100% experienced.
Stick code, these code are written with js. Not difficult, very easy to understand. When looking at, as long as the distinction between two js classes on the line.
Foreground page code :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> User registration </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(' The two passwords are inconsistent ');
                    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(' Registered successfully !');
                    window.location.href='/Default.aspx';
                }
                else
                {
                    alert(' Error occurred , Registration failed ! The user name or domain name may have been registered by someone else! ');
                }
            }

            //Checks if the domain name of the username has been registered by another user
            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"> The user name :</div>
                    </td>
                    <td width="84%"><input type="text" id="txtUserName" onblur="checkIsRegistered(this, ' The user name has been registered , Please use others !', 1)" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty=" The username cannot be empty !" errorSForValidate=" The matching error ! Start with a letter, allow 3-16 Byte, an alphanumeric underscore allowed and a security symbol permitted !" validatePattern="/^[a-zA-Z][a-zA-Z0-9_$%]{2,15}$/" title=" User name must be filled in !"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right"> password :</div>
                    </td>
                    <td><input type="password" id="txtPassword" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty=" The password cannot be empty !" errorSForValidate=" The matching error ! requirements 3-16 Byte, an alphanumeric underscore allowed and a security symbol permitted !!" validatePattern="/^[a-zA-Z0-9_$%]{2,15}$/" title=" Password must be filled in !"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right"> Confirm password :</div>
                    </td>
                    <td><input type="password" id="txtConfirmPassword" isRequired="true" errorSForEmpty=" Make sure the password cannot be empty !"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right"> Password prompt :</div>
                    </td>
                    <td><input type="text" id="txtQuestion" maxlength="50" isRequired="true" isValidate="true" errorSForEmpty=" Password prompt question not filled in !" errorSForValidate=" The length must be 8-50 There must be no space between two characters !" validatePattern="/S{8,50}/" title=" The password prompt question must be filled in !"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right"> Answer to the password question :</div>
                    </td>
                    <td><input type="text" id="txtAnswer" maxlength="50" isRequired="true" isValidate="true" errorSForEmpty=" The answer to the password question was not filled in !" errorSForValidate=" The length must be 8-50 There must be no space between two characters !" validatePattern="/S{8,50}/" title=" The answer to the password question must be filled in !"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right"> site Url:</div>
                    </td>
                    <td><input type="text" id="txtUrl" onblur="checkIsRegistered(this, ' the Url Has been registered , Please use others !', 2)" maxlength="20" isRequired="true" isValidate="true" errorSForEmpty=" site Url Can't be empty !" errorSForValidate=" site Url Format is wrong !" validatePattern="/^[a-zA-Z0-9]{1,20}$/" title=" site Url Must fill in the !"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right"> gender :</div>
                    </td>
                    <td><input type="radio" id="boy" name="sex" value="1" checked> male   <input type="radio" id="girl" name="sex" value="0"> female </td>
                </tr>
                <tr>
                    <td><div align="right">Email:</div>
                    </td>
                    <td><input type="text" id="txtEmail" isValidate="true" errorSForValidate="Email Incorrect format !" validatePattern="/^.+@([?)[a-zA-Z0-9-.]+.([a-zA-Z]{2,3}|[0-9]{1,3})(]?)$/"></td>
                </tr>
                <tr>
                    <td><div align="right"> Fixed telephone :</div>
                    </td>
                    <td><input type="text" id="txtTel" isRequired="true" isValidate="true" errorSForEmpty=" The landline cannot be empty !" errorSForValidate=" Wrong landline format ! Please use the 0592-5555555 The format of the !" validatePattern="/^(d{3}-|d{4}-)?(d{8}|d{7})$/" title=" Landline must be filled out !"><font color="#ff0000">*</font></td>
                </tr>
                <tr>
                    <td><div align="right"> The mobile phone :</div>
                    </td>
                    <td><input type="text" id="txtMobile" isValidate="true" errorSForValidate=" The mobile phone is not formatted correctly !" validatePattern="/^1d{10}$/"></td>
                </tr>
                <tr>
                    <td><div align="right">QQ:</div>
                    </td>
                    <td><input type="text" id="txtQQ" isValidate="true" errorSForValidate="QQ Incorrect format !" validatePattern="/^[1-9]*[1-9][0-9]*$/"></td>
                </tr>
                <tr>
                    <td><div align="right"> address :</div>
                    </td>
                    <td><input type="text" id="txtAddress"></td>
                </tr>
                <tr>
                    <td><div align="right"> Zip code :</div>
                    </td>
                    <td><input type="text" id="txtPostalcode" maxlength="6" isValidate="true" errorSForValidate=" Incorrect postcode !" validatePattern="/^d{6}/"></td>
                </tr>
                <tr>
                    <td><div align="right"> operation :</div>
                    </td>
                    <td><input type="button" value=" registered " id="btnSubmit" onclick="btnSubmit_onclick()">  <input type="reset" value=" reset "></td>
                </tr>
            </table>
        </form>
    </body>
</html>

In the above code, there is a commonfunction.js file that contains the following:


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;
    }
}

Post an effect picture:

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201312/20131223093321.png ">


Related articles: