<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單驗證</title>
</head>
<body>
<style type="text/css">
span{color: red;
font-size: 0.75rem;
}
</style>
<script type="text/javascript">
window.onload=function(){
var usernameError=document.getElementById("usernameError").innerText
var passwordError=document.getElementById("passwordError").innerText
var password2Error=document.getElementById("password2Error").innerText
var emailError=document.getElementById("emailError").innerText
var usernameElt=document.getElementById("username")//獲取用戶名框元素
var username=usernameElt.value//獲取用戶名
username=username.trim()//去除前后空白
var regExp=/^[A-Za-z0-9]+$/
usernameElt.onblur=function(){
if(username){
//用戶名不為空
if(username.length<=6||username.length>14){//驗證用戶名長度合法性
usernameError="用戶名長度不合法"//用戶名長度不合法
}
else if(regExp.test(username){
//用戶名格式合法
else{
usernameError="用戶名格式錯誤"
}
}
}else{
usernameError="用戶名不能為空"
}
}
usernameElt.onfocus=function(){
if(username===""){
username=""//如果用戶名都是空白符則清空
}
usernameError=""//清除錯誤提示
}
var passwordElt=document.getElementById("password")//獲取密碼框元素
var password=passwordElt.value//獲取密碼
passwordElt.onblur=function(){//驗證密碼
if(password==""){
passwordError="密碼不能為空"
}else if(password==username){
passwordError="密碼不能與用戶名重復"
}
}
passwordElt.onfocus=function(){
passwordError=""//清除錯誤提示
}
var password2Elt=document.getElementById("password2")//獲取確認密碼框
var password2=password2Elt.value//獲取確認密碼
password2Elt.onblur=function(){
if(password==password2){
//密碼一致
} else{
password2Error="密碼不一致"
}
}
password2Elt.onfocus=function(){
password2Error=""//清除錯誤提示
}
var emailElt=document.getElementById("email")//獲取郵箱框
var email=emailElt.value//獲取郵箱
var regExp2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///郵箱正則運算式
emailElt.onblur=function(){
if(email===""){
emailError.innerText="郵箱不能為空"
}else if(regExp2.test(email)){
//郵箱地址合法
}else{
emailError="郵箱地址不合法"
}
}
document.getElementById("email").onfocus=function(){
emailError=""//清除錯誤提示
}
var register=document.getElementById("register")
register.onclick=function(){
usernameElt.focus()
usernameElt.blur()
passwordElt.focus()
passwordElt.blur()
password2Elt.focus()
password2Elt.blur()
emailElt.focus()
emailElt.blur()
//觸發每項文本框事件
}
if((usernameError==""&&passwordError==""&&password2Error=="")&&emailError=""){
document.getElementById("Form").submit()
//提交表單
}else{
alert("表單內容有誤！")
}
var reset=document.getElementById("reset")
reset.onclick=function(){
username=""
password=""
password2=""
email=""
}
}
</script>
<!--表單提交一般用post，這里為了檢測所以用get-->
<form action="new_file.html" id="Form" method="get">
用戶名<input type="text" id="username" /><span id="usernameError"></span><br />
密碼<input type="password" id="password" /><span id="passwordError"></span> <br />
確認密碼<input type="password" id="password2" /><span id="password2Error"></span><br />
郵箱<input type="text" id="email" /><span id="emailError"></span><br />
<input type="button" value="https://bbs.csdn.net/topics/注冊" id="register" />
<input type="button" value="https://bbs.csdn.net/topics/重置" id="reset" />
</form>
</body>
</html>
uj5u.com熱心網友回復：
都是一些語法錯誤，比如：
else if (regExp.test(username){
//用戶名格式合法
else {
usernameError = "用戶名格式錯誤"
}
}
else是不能嵌套在else if 里的，應該和else if 并列
uj5u.com熱心網友回復：
我又修改了幾處代碼，麻煩再幫我看看哪有問題
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單驗證</title>
</head>
<body>
<style type="text/css">
span{color: red;
font-size: 0.75rem;
}
</style>
<script type="text/javascript">
window.onload=function(){
var usernameError=document.getElementById("usernameError").innerText
var passwordError=document.getElementById("passwordError").innerText
var password2Error=document.getElementById("password2Error").innerText
var emailError=document.getElementById("emailError").innerText
var usernameElt=document.getElementById("username")//獲取用戶名框元素
var username=usernameElt.value//獲取用戶名
username=username.trim()//去除前后空白
var regExp=/^[A-Za-z0-9]+$/
var ok=regeExp.test(username)
usernameElt.onblur=function(){
if(username===""){
usernameError="用戶名不能為空"
}else if(username.length<6||username.length>14){
usernameError="用戶名長度不合法"
}else if(!ok){
usernameError="用戶名格式不合法"
}
}
usernameElt.onfocus=function(){
if(username===""){
username=""//如果用戶名都是空白符則清空
}
usernameError=""//清除錯誤提示
}
var passwordElt=document.getElementById("password")//獲取密碼框元素
var password=passwordElt.value//獲取密碼
passwordElt.onblur=function(){//驗證密碼
if(password==""){
passwordError="密碼不能為空"
}else if(password==username){
passwordError="密碼不能與用戶名重復"
}
}
passwordElt.onfocus=function(){
passwordError=""//清除錯誤提示
}
var password2Elt=document.getElementById("password2")//獲取確認密碼框
var password2=password2Elt.value//獲取確認密碼
password2Elt.onblur=function(){
if(password==password2){
//密碼一致
} else{
password2Error="密碼不一致"
}
}
password2Elt.onfocus=function(){
password2Error=""//清除錯誤提示
}
var emailElt=document.getElementById("email")//獲取郵箱框
var email=emailElt.value//獲取郵箱
var regExp2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///郵箱正則運算式
emailElt.onblur=function(){
if(email===""){
emailError="郵箱不能為空"
}else if(regExp2.test(email)){
//郵箱地址合法
}else{
emailError="郵箱地址不合法"
}
}
document.getElementById("email").onfocus=function(){
emailError=""//清除錯誤提示
}
var register=document.getElementById("register")
register.onclick=function(){
usernameElt.focus()
usernameElt.blur()
passwordElt.focus()
passwordElt.blur()
password2Elt.focus()
password2Elt.blur()
emailElt.focus()
emailElt.blur()
//觸發每項文本框事件
if(usernameError!=""){
alert("表單內容有誤，無法提交")
}else if(passwordError!=""){
alert("表單內容有誤，無法提交")
}else if(password2Error!=""){
alert("表單內容有誤，無法提交")
}else if(emailError!=""){
alert("表單內容有誤，無法提交")
}else{
alert("正在提交")
}
}
var reset=document.getElementById("reset")
reset.onclick=function(){
username=""
password=""
password2=""
email=""
}
}
</script>
<!--表單提交一般用post，這里為了檢測所以用get-->
<form action="new_file.html" id="Form" method="get">
用戶名<input type="text" id="username" /><span id="usernameError"></span><br />
密碼<input type="password" id="password" /><span id="passwordError"></span> <br />
確認密碼<input type="password" id="password2" /><span id="password2Error"></span><br />
郵箱<input type="text" id="email" /><span id="emailError"></span><br />
<input type="button" value="https://bbs.csdn.net/topics/注冊" id="register" />
<input type="button" value="https://bbs.csdn.net/topics/重置" id="reset" />
</form>
</body>
</html>
uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>表單驗證</title>
</head>
<body>
<style type="text/css">
span{color: red;
font-size: 0.75rem;
}
</style>
<script type="text/javascript">
window.onload=function(){
var usernameError=document.getElementById("usernameError");
var passwordError=document.getElementById("passwordError");
var password2Error=document.getElementById("password2Error");
var emailError=document.getElementById("emailError");
var usernameElt=document.getElementById("username")//獲取用戶名框元素
var regExp=/^[A-Za-z0-9]+$/
usernameElt.onblur=function(){
var username=usernameElt.value//獲取用戶名
username=username.trim()//去除前后空白
var ok=regExp.test(username)
if(username===""){
usernameError.innerText="用戶名不能為空"
}else if(username.length<6||username.length>14){
usernameError.innerText="用戶名長度不合法"
}else if(!ok){
usernameError.innerText="用戶名格式不合法"
}
}
usernameElt.onfocus=function(){
usernameError.innerText=""//清除錯誤提示
}
var passwordElt=document.getElementById("password")//獲取密碼框元素
passwordElt.onblur=function(){//驗證密碼
var password=passwordElt.value//獲取密碼
var username=usernameElt.value//獲取用戶名
username=username.trim()//去除前后空白
if(password==""){
passwordError.innerText="密碼不能為空"
}else if(password==username){
passwordError.innerText="密碼不能與用戶名重復"
}
}
passwordElt.onfocus=function(){
passwordError.innerText=""//清除錯誤提示
}
var password2Elt=document.getElementById("password2")//獲取確認密碼框
password2Elt.onblur=function(){
var password=passwordElt.value//獲取密碼
var password2=password2Elt.value//獲取確認密碼
if(password!=password2){
password2Error.innerText="密碼不一致"
}
}
password2Elt.onfocus=function(){
password2Error.innerText=""//清除錯誤提示
}
var emailElt=document.getElementById("email")//獲取郵箱框
var regExp2=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$///郵箱正則運算式
emailElt.onblur=function(){
var email=emailElt.value//獲取郵箱
if(email===""){
emailError.innerText="郵箱不能為空"
}else if(!regExp2.test(email)){
emailError.innerText="郵箱地址不合法"
}
}
emailElt.onfocus=function(){
emailError.innerText=""//清除錯誤提示
}
var register=document.getElementById("register")
register.onclick=function(){
usernameElt.focus()
usernameElt.blur()
passwordElt.focus()
passwordElt.blur()
password2Elt.focus()
password2Elt.blur()
emailElt.focus()
emailElt.blur()
//觸發每項文本框事件
if(usernameError.innerText!=""){
alert("表單內容有誤，無法提交")
}else if(passwordError.innerText!=""){
alert("表單內容有誤，無法提交")
}else if(password2Error.innerText!=""){
alert("表單內容有誤，無法提交")
}else if(emailError.innerText!=""){
alert("表單內容有誤，無法提交")
}else{
alert("正在提交")
}
}
}
</script>
<!--表單提交一般用post，這里為了檢測所以用get-->
<form action="new_file.html" id="Form" method="get">
用戶名<input type="text" id="username" /><span id="usernameError"></span><br />
密碼<input type="password" id="password" /><span id="passwordError"></span> <br />
確認密碼<input type="password" id="password2" /><span id="password2Error"></span><br />
郵箱<input type="text" id="email" /><span id="emailError"></span><br />
<input type="button" value="https://bbs.csdn.net/topics/注冊" id="register" />
<input type="reset" value="https://bbs.csdn.net/topics/重置" id="reset" />
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/144468.html
標籤：JavaScript
上一篇：請求大神幫忙指導下