js中判斷用戶輸入的值是否為空的簡單實例
更新時間：2013年12月23日 09:35:35 作者：
本篇文章主要是對js中判斷用戶輸入的值是否為空的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
在js中判斷用戶輸入的值是否為空,這是大家用得非常多的. 這沒有什么好寫的. 而我卻寫了. 原因只是自以為是的認(rèn)為我的這些代碼寫得不錯, 供大家參考一下.
這是摘自的我一個項目的中的用戶注冊頁面.對于大多數(shù)人來說,這都幾乎是100%經(jīng)歷過的.
貼代碼吧,這些代碼都是用js寫的. 不難,很容易看懂. 看的時候,只要區(qū)別兩個js類就行了.
前臺頁面代碼:reguser.aspx
復(fù)制代碼 代碼如下:
<%@ 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('有錯誤發(fā)生,注冊失敗!有可能是用戶名或者域名被別人注冊過了！');
}
}
// 檢測用戶名的域名是否被其它用戶注冊過了
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, '該用戶名已經(jīng)被注冊,請使用其它的!', 1)" maxlength="15" isRequired="true" isValidate="true" errorSForEmpty="用戶名不能為空!" errorSForValidate="匹配出錯!以字母開頭，允許3-16字節(jié)，允許字母數(shù)字下劃線以及許可的安全符號!" 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字節(jié)，允許字母數(shù)字下劃線以及許可的安全符號!!" validatePattern="/^[a-zA-Z0-9_$%]{2,15}$/" title="密碼必須填寫!"><font color="#ff0000">*</font></td>
</tr>
<tr>
<td><div align="right">確認(rèn)密碼:</div>
</td>
<td><input type="password" id="txtConfirmPassword" isRequired="true" errorSForEmpty="確認(rèn)密碼不能為空!"><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已經(jīng)被注冊,請使用其它的!', 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文件,下面這是他的內(nèi)容:
復(fù)制代碼 代碼如下:
/***********************************************************
*
* 公共js函數(shù)
*
***********************************************************/
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;
}
}
貼一張效果圖片:
相關(guān)文章
今天小編就為大家分享一篇layui動態(tài)綁定事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關(guān)于JavaScript中this的全面解析及常見實例的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了使用get方式提交表單在地址欄里面不顯示提交信息的相關(guān)資料,需要的朋友可以參考下2017-02-02
下面小編就為大家分享一篇使用JS模擬錨點跳轉(zhuǎn)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點思考
這篇文章主要介紹了淺談關(guān)于JS下大批量異步任務(wù)按順序執(zhí)行解決方案一點思考，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
VS Code轉(zhuǎn)換大小寫、修改選中文字或代碼顏色的方法
最近在使用VS Code，發(fā)現(xiàn)了不少使用的小技巧，覺著有必要給大家分享下，下面這篇文章主要給大家介紹了關(guān)于VS Code轉(zhuǎn)換大小寫、修改選中文字或代碼顏色的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-12-12
小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解
這篇文章主要介紹了小程序使用watch監(jiān)聽數(shù)據(jù)變化的方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了JavaScript中的連續(xù)賦值問題,結(jié)合實例形式分析了javascript賦值語句以及連續(xù)賦值操作相關(guān)用法與操作注意事項,需要的朋友可以參考下2019-07-07
js 將圖片連接轉(zhuǎn)換成base64格式的簡單實例
下面小編就為大家?guī)硪黄猨s 將圖片連接轉(zhuǎn)換成base64格式的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
原生JavaScript實現(xiàn)連連看游戲(附源碼)
原生JavaScript版連連看游戲，有源碼，適合初學(xué)者學(xué)習(xí)，喜歡的朋友可以研究下2013-11-11