本篇文章主要是對js中判斷用戶輸入的值是否為空的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
在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="/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="/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="/^1d{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; } }