JavaScript表單校驗
阿新 • • 發佈：2018-11-12
確認事件
事件觸發函式
函式操作元素
校驗使用者名稱
1. 當用戶滑鼠移動到輸入框中時候, 請給使用者一個提示
事件: 焦點事件 onfocus
觸發函式
函式裡面要做一些事情
span 給使用者提示資訊
2. 當用戶滑鼠移開時候, 校驗一下使用者輸入
事件: 失去焦點 onblur
觸發函式
函式要幹事情:
校驗使用者輸入
得到使用者輸入的值
3. 當用戶按鍵輸入擡起的時候, 校驗一下使用者輸入
01JS表單校驗.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01JS表單校驗</title> <!-- /* 1. 確定事件 : onfocus 2. 事件要驅動函式 3. 函式要幹一些事情: 修改span的內容 */ --> <!-- 確認事件 事件觸發函式 函式操作元素 校驗使用者名稱 1. 當用戶滑鼠移動到輸入框中時候, 請給使用者一個提示 事件: 焦點事件 onfocus 觸發函式 函式裡面要做一些事情 span 給使用者提示資訊 2. 當用戶滑鼠移開時候, 校驗一下使用者輸入 事件: 失去焦點 onblur 觸發函式 函式要幹事情: 校驗使用者輸入 得到使用者輸入的值 3. 當用戶按鍵輸入擡起的時候, 校驗一下使用者輸入 --> <script> //使用者名稱 function show(){ //首先要獲得要操作元素 span var span = document.getElementById("uname"); span.innerHTML = "<font color='red'>使用者名稱長度不能小於6位</font>"; } function checkusername(){ //獲取使用者輸入的內容 var uValue = document.getElementById("username").value; //對輸入的內容進行校驗 var span = document.getElementById("uname"); //獲得要顯示結果的span if(uValue.length < 6){ //顯示校驗結果 span.innerHTML = "<font color='red'>對不起,您輸入的使用者名稱太短.</font>"; }else{ //顯示校驗結果 span.innerHTML = "<font color='green'>√</font>"; } } //密碼 function show1(){ //首先要獲得要操作元素 span var span = document.getElementById("upass"); span.innerHTML = "<font color='red'>密碼長度不得小於6位!</font>"; } function checkpassword(){ //獲取使用者輸入的內容 var uValue = document.getElementById("password").value; //對輸入的內容進行校驗 var span = document.getElementById("upass"); //獲得要顯示結果的span if(uValue.length < 6){ //顯示校驗結果 span.innerHTML = "<font color='red'>對不起,您輸入的密碼太短.</font>"; }else{ //顯示校驗結果 span.innerHTML = "<font color='green'>√</font>"; } } </script> </head> <body> <form> 使用者名稱 :<input type="text" placeholder="請輸入使用者名稱" id="username" onfocus="show()" onblur="checkusername()" onkeyup="checkusername()"/><span id="uname"></span><br/> 密 碼 :<input type="password" placeholder="請輸入密碼" id="password" onfocus="show1()" onblur="checkpassword()" onkeyup="checkpassword()"/><span id="upass"></span><br/> 確認密碼 :<input type="password" placeholder="和密碼保持一致" id="repassword" /><span id="urepass"></span><br/> Email:<input type="text" placeholder="Email" id="email" /><span id="uemail"></span><br/> 手機號 :<input type="text" placeholder="請輸入手機號" id="phone" /><span id="uphone"></span><br/> <input type="button" value="註冊" /><br/> </form> </body> </html>
02JS表單校驗優化.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>02JS表單校驗優化</title> <!-- 引入外部的js檔案 --> <script type="text/javascript" src="js/regutils.js" ></script> <script> /* 1. 確定事件 : onfocus 2. 事件要驅動函式 3. 函式要幹一些事情: 修改span的內容 */ function showTips(spanID,msg){ //首先要獲得要操作元素 span var span = document.getElementById(spanID); span.innerHTML = msg; } /* 校驗使用者名稱: 1.事件: onblur 失去焦點 2.函式: checkUsername() 3.函式去顯示校驗結果 */ function checkUsername(){ //獲取使用者輸入的內容 var uValue = document.getElementById("username").value; //對輸入的內容進行校驗 //獲得要顯示結果的span var span = document.getElementById("span_username"); if(uValue.length < 6){ //顯示校驗結果 span.innerHTML = "<font color='red' size='2'>對不起,太短</font>"; return false; }else{ span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; return true; } } /* 密碼校驗 */ function checkPassword(){ //獲取密碼輸入 var uPass = document.getElementById("password").value; var span = document.getElementById("span_password"); //對密碼輸入進行校驗 if(uPass.length < 6){ span.innerHTML = "<font color='red' size='2'>對不起,太短</font>"; return false; }else{ span.innerHTML = "<font color='red' size='2'>恭喜您,夠用</font>"; return true; } } /* 確認密碼校驗 * */ function checkRePassword(){ //獲取密碼輸入 var uPass = document.getElementById("password").value; //獲取確認密碼輸入 var uRePass = document.getElementById("repassword").value; var span = document.getElementById("span_repassword"); //對密碼輸入進行校驗 if(uPass != uRePass){ span.innerHTML = "<font color='red' size='2'>對不起,兩次密碼不一致</font>"; return false; }else{ span.innerHTML = "<font color='red' size='2'>兩次密碼一致</font>"; return true; } } /* 校驗郵箱 * */ function checkMail(){ var umail = document.getElementById("email").value; var flag = checkEmail(umail); var span = document.getElementById("span_email"); //對郵箱輸入進行校驗 if(flag){ span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>"; return true; }else{ span.innerHTML = "<font color='red' size='2'>對不起,郵箱格式貌似有問題</font>"; return false; } } function checkForm(){ var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail(); return flag; } </script> </head> <body> <form action="../01圖片自動輪播/03圖片輪播.html" onsubmit="return checkForm()" > 使用者名稱:<input type="text" id="username" onfocus="showTips('span_username','使用者名稱長度不能小於6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br /> 密碼:<input type="password" id="password" onfocus="showTips('span_password','密碼長度不能小於6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br /> 確認密碼:<input type="password" id="repassword" onfocus="showTips('span_repassword','兩次密碼必須一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br /> 郵箱:<input type="text" id="email" onfocus="showTips('span_email','郵箱格式必須正確')" onblur="checkMail()" /><span id="span_email"></span><br /> 手機號:<input type="text" id="text" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
regutils.js
/*
用途：檢查輸入的Email信箱格式是否正確
輸入：strEmail：字串
返回：如果通過驗證返回true,否則返回false
*/
function checkEmail(strEmail)
{
var emailReg = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if ( emailReg.test(strEmail) ) {
return true;
}
else {
// alert("您輸入的Email地址格式不正確！");
return false;
}
};
/*
用途：校驗ip地址的格式
輸入：strIP：ip地址
返回：如果通過驗證返回true,否則返回false；
*/
function isIP(strIP)
{
if (isNull(strIP)) {
return false;
}
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/ //匹配IP地址的正則表示式
if (re.test(strIP)) {
if ( RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) {
return true;
}
}
return false;
};
/*
用途：檢查輸入手機號碼是否正確
輸入：strMobile：字串
返回：如果通過驗證返回true,否則返回false
*/
function checkMobile( strMobile )
{ //13588888888
var regu = /^[1][345678][0-9]{9}$/;
var re = new RegExp(regu);
if (re.test(strMobile)) {
return true;
}
else {
return false;
}
};
/*
用途：檢查輸入的電話號碼格式是否正確
輸入：strPhone：字串
返回：如果通過驗證返回true,否則返回false
*/
function checkPhone( strPhone )
{
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
var prompt = "您輸入的電話號碼不正確!"
if ( strPhone.length > 9 ) {
if ( phoneRegWithArea.test(strPhone) ) {
return true;
}
else {
alert( prompt );
return false;
}
}
else {
if ( phoneRegNoArea.test( strPhone ) ) {
return true;
}
else {
alert( prompt );
return false;
}
}
};
/*
用途：檢查輸入字串是否為空或者全部都是空格
輸入：str
返回：如果全是空返回true,否則返回false
*/
function isNull( str )
{
if ( str == "" ) {
return true;
}
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
};
/*
用途：檢查輸入物件的值是否符合整數格式
輸入：str 輸入的字串
返回：如果通過驗證返回true,否則返回false
*/
function isInteger( str )
{
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
};
/*
用途：檢查輸入字串是否符合正整數格式
輸入：s：字串
返回：如果通過驗證返回true,否則返回false
*/
function isNumber( s )
{
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != - 1) {
return true;
}
else {
return false;
}
};
/*
用途：檢查輸入字串是否是帶小數的數字格式,可以是負數
輸入：str：字串
返回：如果通過驗證返回true,否則返回false
*/
function isDecimal( str )
{
if (isInteger(str)) {
return true;
}
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
if (re.test(str)) {
if (RegExp.$1 == 0 && RegExp.$2 == 0) {
return false;
}
return true;
}
else {
return false;
}
};
/*
用途：檢查輸入物件的值是否符合埠號格式
輸入：str 輸入的字串
返回：如果通過驗證返回true,否則返回false
*/
function isPort( str )
{
return (isNumber(str) && str < 65536);
};
/*
用途：檢查輸入字串是否符合金額格式,格式定義為帶小數的正數，小數點後最多三位
輸入：s：字串
返回：如果通過驗證返回true,否則返回false
*/
function isMoney( s )
{
var regu = "^[0-9]+[\.][0-9]{0,3}$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}
else {
return false;
}
};
/*
用途：檢查輸入字串是否只由英文字母和數字和下劃線組成
輸入：s：字串
返回：如果通過驗證返回true,否則返回false
*/
function isNumberOr_Letter( s )
{
//判斷是否是數字或字母
var regu = "^[0-9a-zA-Z\_]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}
else {
return false;
}
};
/*
用途：檢查輸入字串是否只由英文字母和數字組成
輸入：s：字串
返回：如果通過驗證返回true,否則返回false
*/
function isNumberOrLetter( s )
{
//判斷是否是數字或字母
var regu = "^[0-9a-zA-Z]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}
else {
return false;
}
};
/*
用途：檢查輸入字串是否只由漢字、字母、數字組成
輸入：s：字串
返回：如果通過驗證返回true,否則返回false
*/
function isChinaOrNumbOrLett( s )
{
//判斷是否是漢字、字母、數字組成
var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
}
else {
return false;
}
};
/*
用途：判斷是否是日期
輸入：date：日期；fmt：日期格式
返回：如果通過驗證返回true,否則返回false
*/
function isDate( date, fmt )
{
if (fmt == null) {
fmt = "yyyyMMdd";
}
var yIndex = fmt.indexOf("yyyy");
if (yIndex ==- 1) {
return false;
}
var year = date.substring(yIndex, yIndex + 4);
var mIndex = fmt.indexOf("MM");
if (mIndex ==- 1) {
return false;
}
var month = date.substring(mIndex, mIndex + 2);
var dIndex = fmt.indexOf("dd");
if (dIndex ==- 1) {
return false;
}
var day = date.substring(dIndex, dIndex + 2);
if (!isNumber(year) || year > "2100" || year < "1900") {
return false;
}
if (!isNumber(month) || month > "12" || month < "01") {
return false;
}
if (day > getMaxDay(year, month) || day < "01") {
return false;
}
return true;
};
function getMaxDay(year, month)
{
if (month == 4 || month == 6 || month == 9 || month == 11) {
return "30";
}
if (month == 2) {
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
return "29";
}
else {
return "28";
}
return "31";;
}
};
/*
用途：字元1是否以字串2結束
輸入：str1：字串；str2：被包含的字串
返回：如果通過驗證返回true,否則返回false
*/
function isLastMatch(str1, str2)
{
var index = str1.lastIndexOf(str2);
if (str1.length == index + str2.length) {
return true;
}
return false;
};
/*
用途：字元1是否以字串2開始
輸入：str1：字串；str2：被包含的字串
返回：如果通過驗證返回true,否則返回false
*/
function isFirstMatch(str1, str2)
{
var index = str1.indexOf(str2);
if (index == 0) {
return true;
}
return false;
};
/*
用途：字元1是包含字串2
輸入：str1：字串；str2：被包含的字串
返回：如果通過驗證返回true,否則返回false
*/
function isMatch(str1, str2)
{
var index = str1.indexOf(str2);
if (index ==- 1) {
return false;
}
return true;
};
/*
用途：檢查輸入的起止日期是否正確，規則為兩個日期的格式正確，且結束如期>=起始日期
輸入：startDate：起始日期，字串; endDate：結束如期，字串
返回：如果通過驗證返回true,否則返回false
*/
function checkTwoDate( startDate, endDate )
{
if ( !isDate(startDate) ) {
alert("起始日期不正確!");
return false;
}
else if ( !isDate(endDate) ) {
alert("終止日期不正確!");
return false;
}
else if ( startDate > endDate ) {
alert("起始日期不能大於終止日期!");
return false;
}
return true;
};
/*
用途：檢查複選框被選中的數目
輸入：checkboxID：字串
返回：返回該複選框中被選中的數目
*/
function checkSelect( checkboxID )
{
var check = 0;
var i = 0;
if ( document.all(checkboxID).length > 0 )
{
for ( i = 0; i < document.all(checkboxID).length; i++ ) {
if ( document.all(checkboxID).item( i ).checked ) {
check += 1;
}
}
}
else {
if ( document.all(checkboxID).checked ) {
check = 1;
}
}
return check;
}
function getTotalBytes(varField)
{
if (varField == null) {
return - 1;
}
var totalCount = 0;
for (i = 0; i < varField.value.length; i++) {
if (varField.value.charCodeAt(i) > 127) {
totalCount += 2;
}
else {
totalCount++ ;
}
}
return totalCount;
}
function getFirstSelectedValue( checkboxID )
{
var value = null;
var i = 0;
if ( document.all(checkboxID).length > 0 )
{
for ( i = 0; i < document.all(checkboxID).length; i++ )
{
if ( document.all(checkboxID).item( i ).checked ) {
value = document.all(checkboxID).item(i).value;
break;
}
}
}
else {
if ( document.all(checkboxID).checked ) {
value = document.all(checkboxID).value;
}
}
return value;
}
function getFirstSelectedIndex( checkboxID )
{
var value = - 2;
var i = 0;
if ( document.all(checkboxID).length > 0 )
{
for ( i = 0; i < document.all(checkboxID).length; i++ ) {
if ( document.all(checkboxID).item( i ).checked ) {
value = i;
break;
}
}
}
else {
if ( document.all(checkboxID).checked ) {
value = - 1;
}
}
return value;
}
function selectAll( checkboxID, status )
{
if ( document.all(checkboxID) == null) {
return;
}
if ( document.all(checkboxID).length > 0 )
{
for ( i = 0; i < document.all(checkboxID).length; i++ ) {
document.all(checkboxID).item( i ).checked = status;
}
}
else {
document.all(checkboxID).checked = status;
}
}
function selectInverse( checkboxID )
{
if ( document.all(checkboxID) == null) {
return;
}
if ( document.all(checkboxID).length > 0 )
{
for ( i = 0; i < document.all(checkboxID).length; i++ )
{
document.all(checkboxID).item( i ).checked = !document.all(checkboxID).item( i ).checked;
}
}
else {
document.all(checkboxID).checked = !document.all(checkboxID).checked;
}
}
function checkDate( value )
{
if (value == '') {
return true;
}
if (value.length != 8 || !isNumber(value)) {
return false;
}
var year = value.substring(0, 4);
if (year > "2100" || year < "1900") {
return false;
}
var month = value.substring(4, 6);
if (month > "12" || month < "01") {
return false;
}
var day = value.substring(6, 8);
if (day > getMaxDay(year, month) || day < "01") {
return false;
}
return true;
};
/*
用途：檢查輸入的起止日期是否正確，規則為兩個日期的格式正確或都為空且結束日期>=起始日期
輸入：startDate：起始日期，字串; endDate： 結束日期，字串
返回：如果通過驗證返回true,否則返回false
*/
function checkPeriod( startDate, endDate )
{
if ( !checkDate(startDate) ) {
alert("起始日期不正確!");
return false;
}
else if ( !checkDate(endDate) ) {
alert("終止日期不正確!");
return false;
}
else if ( startDate > endDate ) {
alert("起始日期不能大於終止日期!");
return false;
}
return true;
};
/*
用途：檢查證券程式碼是否正確
輸入：secCode:證券程式碼
返回：如果通過驗證返回true,否則返回false
*/
function checkSecCode( secCode )
{
if ( secCode.length != 6 ) {
alert("證券程式碼長度應該為6位");
return false;
}
if (!isNumber( secCode ) ) {
alert("證券程式碼只能包含數字");
return false;
}
return true;
};
/*
function:cTrim(sInputString,iType)
description:字串去空格的函式
parameters:iType：1=去掉字串左邊的空格;2=去掉字串左邊的空格;0=去掉字串左邊和右邊的空格
return value:去掉空格的字串
*/
function cTrim(sInputString, iType)
{
var sTmpStr = ' ';
var i = - 1;
if (iType == 0 || iType == 1)
{
while (sTmpStr == ' ') {
++i;
sTmpStr = sInputString.substr(i, 1);
}
sInputString = sInputString.substring(i);
}
if (iType == 0 || iType == 2)
{
sTmpStr = ' ';
i = sInputString.length;
while (sTmpStr == ' ') {
--i;
sTmpStr = sInputString.substr(i, 1);
}
sInputString = sInputString.substring(0, i + 1);
}
return sInputString;
};03JS表單校驗demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03JS表單校驗demo</title>
<!--
確認事件
事件觸發函式
函式操作元素
校驗使用者名稱
1. 當用戶滑鼠移動到輸入框中時候, 請給使用者一個提示
事件: 焦點事件 onfocus
觸發函式
函式裡面要做一些事情
span 給使用者提示資訊
2. 當用戶滑鼠移開時候, 校驗一下使用者輸入
事件: 失去焦點 onblur
觸發函式
函式要幹事情:
校驗使用者輸入
得到使用者輸入的值
3. 當用戶按鍵輸入擡起的時候, 校驗一下使用者輸入
-->
<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
function checkUsername(){
/*
alert(this) 每一個函式中都隱藏著一個this指標, 指向的是當前事件觸發物件
*/
var uValue = document.getElementById("username").value;
// alert(uValue);
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "對不起,太短啦!"
return false;
}else{
span.innerHTML = "恭喜您,夠用!"
return true;
}
}
function checkForm(){
var flag = checkUsername();
return flag;
}
</script>
</head>
<body>
<form action="../01圖片自動輪播/03圖片輪播.html" onsubmit="return checkForm()">
使用者名稱:<input type="text" id="username" onblur="checkUsername()" onfocus="showTips('span_username','使用者名稱長度不能小於6位')" /><span id="span_username"></span> <br />
<input type="submit" value="註冊" />
</form>
</body>
</html>