js進行表單驗證實例分析
更新時間：2015年02月10日 10:20:52 作者：woshisap
這篇文章主要介紹了js進行表單驗證的方法,實例分析了各種常見的js表單驗證技巧,需要的朋友可以參考下
本文實例講述了js進行表單驗證的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
1. 傳統(tǒng)的表單驗證代碼
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
if(email == "") {
alert("Email值不能為空");
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
alert("郵箱格式不正確,必須包含@和.");
$("email").focus();
return false;
}
if(password == "") {
alert("密碼不能為空");
$("password").focus();
return false;
}
if(password.length < 6) {
alert("密碼長度必須大于或者等于6");
$("password").focus();
return false;
}
if(repassword != password) {
alert("兩次輸入的密碼不一致");
$("repassword").focus();
return false;
}
if(name == "") {
alert("姓名不能為空");
$("name").focus();
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
alert('姓名中不能包含數(shù)字');
$("name").focus();
return false;
}
}
}
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email"/>
</div>
<div>
密碼:<input type="password" name="password" id="password" />
</div>
<div>
重輸密碼:<input type="password" name="repassword" id="repassword" />
</div>
<div>
姓名：<input type="text" name="name" id="name" />
</div>
<div>
<input type="submit" value="注冊" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
if(email == "") {
alert("Email值不能為空");
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
alert("郵箱格式不正確,必須包含@和.");
$("email").focus();
return false;
}
if(password == "") {
alert("密碼不能為空");
$("password").focus();
return false;
}
if(password.length < 6) {
alert("密碼長度必須大于或者等于6");
$("password").focus();
return false;
}
if(repassword != password) {
alert("兩次輸入的密碼不一致");
$("repassword").focus();
return false;
}
if(name == "") {
alert("姓名不能為空");
$("name").focus();
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
alert('姓名中不能包含數(shù)字');
$("name").focus();
return false;
}
}
}
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email"/>
</div>
<div>
密碼:<input type="password" name="password" id="password" />
</div>
<div>
重輸密碼:<input type="password" name="repassword" id="repassword" />
</div>
<div>
姓名：<input type="text" name="name" id="name" />
</div>
<div>
<input type="submit" value="注冊" />
</div>
</form>
</body>
</html>
2. 輸入框后面有提示信息的表單驗證
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
if(email == "") {
$("emailinfo").innerHTML = "Email值不能為空";
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和.";
$("email").focus();
return false;
}
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
$("password").focus();
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
$("password").focus();
return false;
}
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
$("repassword").focus();
return false;
}
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
$("name").focus();
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
$("name").focus();
return false;
}
}
}
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span>
</div>
<div>
密碼:<input type="password" name="password" id="password" /><span id="passwordinfo"></span>
</div>
<div>
重輸密碼:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span>
</div>
<div>
姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span>
</div>
<div>
<input type="submit" value="注冊" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
if(email == "") {
$("emailinfo").innerHTML = "Email值不能為空";
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和.";
$("email").focus();
return false;
}
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
$("password").focus();
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
$("password").focus();
return false;
}
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
$("repassword").focus();
return false;
}
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
$("name").focus();
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
$("name").focus();
return false;
}
}
}
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email"/><span id="emailinfo"></span>
</div>
<div>
密碼:<input type="password" name="password" id="password" /><span id="passwordinfo"></span>
</div>
<div>
重輸密碼:<input type="password" name="repassword" id="repassword" /><span id="repasswordinfo"></span>
</div>
<div>
姓名：<input type="text" name="name" id="name" /><span id="nameinfo"></span>
</div>
<div>
<input type="submit" value="注冊" />
</div>
</form>
</body>
</html>
效果圖如下所示：
3. 在輸入框失去焦點時觸發(fā)校驗函數(shù)
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
if(email == "") {
$("emailinfo").innerHTML = "Email值不能為空";
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和.";
return false;
}
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
return false;
}
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
return false;
}
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
return false;
}
}
}
function checkEmail() { //校驗Email
$('emailinfo').innerHTML = "";
var email = $('email').value;
if(email == "") {
$('emailinfo').innerHTML = "Email值不能為空";
return false;
}
if(email.indexOf('@') == -1 || email.indexOf('.') == -1) {
$('emailinfo').innerHTML = "Email必須包含@和.";
return false;
}
}
function checkPassword() { //校驗密碼
$('passwordinfo').innerHTML = "";
var password = $('password').value;
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
return false;
}
}
function checkRepassword() { //校驗重新輸入的密碼
$('repassword').innerHTML = "";
var repassword = $('repassword').value;
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
return false;
}
}
function checkName() { //校驗姓名
$('nameinfo').innerHTML = "";
var name = $('name').value;
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
return false;
}
}
}
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email" onblur="checkEmail();"/><span id="emailinfo"></span>
</div>
<div>
密碼:<input type="password" name="password" id="password" onblur="checkPassword();"/><span id="passwordinfo"></span>
</div>
<div>
重輸密碼:<input type="password" name="repassword" id="repassword" onblur="checkRepassword();"/><span id="repasswordinfo"></span>
</div>
<div>
姓名：<input type="text" name="name" id="name" onblur="checkName();"/><span id="nameinfo"></span>
</div>
<div>
<input type="submit" value="注冊" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表單驗證</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
if(email == "") {
$("emailinfo").innerHTML = "Email值不能為空";
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
$("emailinfo").innerHTML = "郵箱格式不正確,必須包含@和.";
return false;
}
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
return false;
}
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
return false;
}
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
return false;
}
}
}
function checkEmail() { //校驗Email
$('emailinfo').innerHTML = "";
var email = $('email').value;
if(email == "") {
$('emailinfo').innerHTML = "Email值不能為空";
return false;
}
if(email.indexOf('@') == -1 || email.indexOf('.') == -1) {
$('emailinfo').innerHTML = "Email必須包含@和.";
return false;
}
}
function checkPassword() { //校驗密碼
$('passwordinfo').innerHTML = "";
var password = $('password').value;
if(password == "") {
$("passwordinfo").innerHTML = "密碼不能為空";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密碼長度必須大于或者等于6";
return false;
}
}
function checkRepassword() { //校驗重新輸入的密碼
$('repassword').innerHTML = "";
var repassword = $('repassword').value;
if(repassword != password) {
$("repasswordinfo").innerHTML = "兩次輸入的密碼不一致";
return false;
}
}
function checkName() { //校驗姓名
$('nameinfo').innerHTML = "";
var name = $('name').value;
if(name == "") {
$("nameinfo").innerHTML = "姓名不能為空";
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
$("nameinfo").innerHTML = '姓名中不能包含數(shù)字';
return false;
}
}
}
</script>
</head>
<body>
<form name="login_form" method="post" onsubmit="return check()">
<div>
Email:<input type="text" name="email" id="email" onblur="checkEmail();"/><span id="emailinfo"></span>
</div>
<div>
密碼:<input type="password" name="password" id="password" onblur="checkPassword();"/><span id="passwordinfo"></span>
</div>
<div>
重輸密碼:<input type="password" name="repassword" id="repassword" onblur="checkRepassword();"/><span id="repasswordinfo"></span>
</div>
<div>
姓名：<input type="text" name="name" id="name" onblur="checkName();"/><span id="nameinfo"></span>
</div>
<div>
<input type="submit" value="注冊" />
</div>
</form>
</body>
</html>
效果圖如下所示：
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript中的await函數(shù)使用小結(jié)
async 函數(shù)是 AsyncFunction 構(gòu)造函數(shù)的實例,并且其中允許使用 await 關(guān)鍵字,async 和 await 關(guān)鍵字讓我們可以用一種更簡潔的方式寫出基于 Promise 的異步行為,而無需刻意地鏈式調(diào)用 promise,這篇文章主要介紹了JavaScript中的await,需要的朋友可以參考下2024-01-01
使用javascript創(chuàng)建快捷方式的簡單實例
這篇文章介紹了使用javascript創(chuàng)建快捷方式的簡單實例，有需要的朋友可以參考一下2013-08-08
ES6學習筆記之字符串、數(shù)組、對象、函數(shù)新增知識點實例分析
這篇文章主要介紹了ES6學習筆記之字符串、數(shù)組、對象、函數(shù)新增知識點,結(jié)合實例形式分析了ES6字符串、數(shù)組、對象、函數(shù)新增知識點、使用技巧與操作注意事項,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了微信小程序如何實現(xiàn)點擊圖片放大功能,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01
js 判斷一個元素是否存在此功能在項目中很實用，本人搜集整理了一些常用技巧，需要了解的朋友可以參考下2012-12-12
這篇文章主要介紹了Javascript中window.name屬性詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
React Native JSI實現(xiàn)RN與原生通信的示例代碼
本文主要介紹了React Native JSI實現(xiàn)RN與原生通信的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
js關(guān)閉模態(tài)窗口刷新父頁面或跳轉(zhuǎn)頁面
點擊按鈕時，彈出B窗口（模態(tài)）。在B窗口中添加數(shù)據(jù)，提交后，要求B窗口自關(guān)閉，然后刷新A窗口（父），需要的朋友可以了解下2012-12-12
JS日期格式化之javascript Date format
這篇文章主要介紹了JS日期格式化之javascript Date format的相關(guān)資料,需要的朋友可以參考下2015-10-10