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: