介紹一下表單驗證，不錯哦：

如圖

CSS代碼

@charset "gb2312";

/* CSS Document */

body,dl,dt,dd,div,form {padding:0;margin:0;}

#header,#main{

width:650px;

margin:0 auto;

}

.bg{

background-image:url(../images/register_bg.gif);

background-repeat:no-repeat;

width:6px;

height:6px;

}

.bg_top_left{

background-position:0px 0px;

}

.bg_top_right{

background-position:0px -6px;

}

.bg_end_left{

background-position:0px -12px;

}

.bg_end_right{

background-position:0px -18px;

}

.bg_top{

border-top:solid 1px #666666;

}

.bg_end{

border-bottom:solid 1px #666666;

}

.bg_left{

border-left:solid 1px #666666;

}

.bg_right{

border-right:solid 1px #666666;

}

.content{

padding:10px;

}

.inputs{

border:solid 1px #a4c8e0;

width:150px;

height:15px;

}

.userWidth{

width:110px;

}

.content div{

float:left;

font-size:12px;

color:#000;

}

dl{

clear:both;

}

dt,dd{

float:left;

}

dt{

width:130px;

text-align:right;

font-size:14px;

height:30px;

line-height:25px;

}

dd{

font-size:12px;

color:#666666;

width:180px;

}

/*當鼠標放到文本框時，提示文本的樣式*/

.import_prompt{

border:solid 1px #ffcd00;

background-color:#ffffda;

padding-left:5px;

padding-right:5px;

line-height:20px;

}

/*當文本框內容不符合要求時，提示文本的樣式*/

.error_prompt{

border:solid 1px #ff3300;

background-color:#fff2e5;

background-image:url(../images/li_err.gif);

background-repeat:no-repeat;

background-position:5px 2px;

padding:2px 5px 0px 25px;

line-height:20px;

}

/*當文本框內容輸入正確時，提示文本的樣式*/

.ok_prompt{

border:solid 1px #01be00;

background-color:#e6fee4;

background-image:url(../images/li_ok.gif);

background-repeat:no-repeat;

background-position:5px 2px;

padding:2px 5px 0px 25px;

line-height:20px;

}

js

// JavaScript Document

/*通過ID獲取HTML對象的通用方法，使用$代替函數名稱*/

function $(elementId){

return document.getElementById(elementId);

}

/*當鼠標放在通行證用戶名文本框時，提示文本及樣式*/

function userNameFocus(){

var userNameId=$("userNameId");

userNameId.className="import_prompt";

userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成
2、只能以數字、字母開頭或結尾，且長度為4-18";

}

/*當鼠標離開通行證用戶名文本框時，提示文本及樣式*/

function userNameBlur(){

var userName=$("userName");

var userNameId=$("userNameId");

var reg=/^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;

if(userName.value==""){

userNameId.className="error_prompt";

userNameId.innerHTML="通行證用戶名不能為空，請輸入通行證用戶名";

return false;

}

if(reg.test(userName.value)==false){

userNameId.className="error_prompt";

userNameId.innerHTML="1、由字母、數字、下劃線、點、減號組成
2、只能以數字、字母開頭或結尾，且長度為4-18";

return false;

}

userNameId.className="ok_prompt";

userNameId.innerHTML="通行證用戶名輸入正確";

return true;

}

/*當鼠標放在密碼文本框時，提示文本及樣式*/

function pwdFocus(){

var pwdId=$("pwdId");

pwdId.className="import_prompt";

pwdId.innerHTML="密碼長度為6-16";

}

/*當鼠標離開密碼文本框時，提示文本及樣式*/

function pwdBlur(){

var pwd=$("pwd");

var pwdId=$("pwdId");

if(pwd.value==""){

pwdId.className="error_prompt";

pwdId.innerHTML="密碼不能為空，請輸入密碼";

return false;

}

if(pwd.value.length<6 || pwd.value.length>16){

pwdId.className="error_prompt";

pwdId.innerHTML="密碼長度為6-16";

return false;

}

pwdId.className="ok_prompt";

pwdId.innerHTML="密碼輸入正確";

return true;

}

/*當鼠標離開重復密碼文本框時，提示文本及樣式*/

function repwdBlur(){

var repwd=$("repwd");

var pwd=$("pwd");

var repwdId=$("repwdId");

if(repwd.value==""){

repwdId.className="error_prompt";

repwdId.innerHTML="重復密碼不能為空，請重復輸入密碼";

return false;

}

if(repwd.value!=pwd.value){

repwdId.className="error_prompt";

repwdId.innerHTML="兩次輸入的密碼不一致，請重新輸入";

return false;

}

repwdId.className="ok_prompt";

repwdId.innerHTML="兩次密碼輸入正確";

return true;

}

/*當鼠標放在昵稱文本框時，提示文本及樣式*/

function nickNameFocus(){

var nickNameId=$("nickNameId");

nickNameId.className="import_prompt";

nickNameId.innerHTML="1、包含漢字、字母、數字、下劃線以及@!#$%&*特殊字符
2、長度為4－20個字符
3、一個漢字占兩個字符";

}

/*當鼠標離開昵稱文本框時，提示文本及樣式*/

function nickNameBlur(){

var nickName=$("nickName");

var nickNameId=$("nickNameId");

var k=0;

var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配昵稱

var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字符

if(nickName.value==""){

nickNameId.className="error_prompt";

nickNameId.innerHTML="昵稱不能為空，請輸入昵稱";

return false;

}

if(reg.test(nickName.value)==false){

nickNameId.className="error_prompt";

nickNameId.innerHTML="只能由漢字、字母、數字、下劃線以及@!#$%&*特殊字符組成";

return false;

}

var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符轉換為兩個字母，以計算字符長度

if(len<4||len>20){

nickNameId.className="error_prompt";

nickNameId.innerHTML="1、長度為4－20個字符
2、一個漢字占兩個字符";

return false;

}

nickNameId.className="ok_prompt";

nickNameId.innerHTML="昵稱輸入正確";

return true;

}

/*當鼠標放在關聯手機號文本框時，提示文本及樣式*/

function telFocus(){

var telId=$("telId");

telId.className="import_prompt";

telId.innerHTML="1、手機號碼以13，15，18開頭
2、手機號碼由11位數字組成";

}

/*當鼠標離開關聯手機號文本框時，提示文本及樣式*/

function telBlur(){

var tel=$("tel");

var telId=$("telId");

var reg=/^(13|15|18)\d{9}$/;

if(tel.value==""){

telId.className="error_prompt";

telId.innerHTML="關聯手機號碼不能為空，請輸入關聯手機號碼";

return false;

}

if(reg.test(tel.value)==false){

telId.className="error_prompt";

telId.innerHTML="關聯手機號碼輸入不正確，請重新輸入";

return false;

}

telId.className="ok_prompt";

telId.innerHTML="關聯手機號碼輸入正確";

return true;

}

/*當鼠標放在保密郵箱文本框時，提示文本及樣式*/

function emailFocus(){

var emailId=$("emailId");

emailId.className="import_prompt";

emailId.innerHTML="請輸入您常用的電子郵箱";

}

/*當鼠標離開保密郵箱文本框時，提示文本及樣式*/

function emailBlur(){

var email=$("email");

var emailId=$("emailId");

var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;

if(email.value==""){

emailId.className="error_prompt";

emailId.innerHTML="保密郵箱不能為空，請輸入保密郵箱";

return false;

}

if(reg.test(email.value)==false){

emailId.className="error_prompt";

emailId.innerHTML="保密郵箱格式不正確，請重新輸入";

return false;

}

emailId.className="ok_prompt";

emailId.innerHTML="保密郵箱輸入正確";

return true;

}

/*表單提交時驗證表單內容輸入的有效性*/

function checkForm(){

var flagUserName=userNameBlur();

var flagPwd=pwdBlur();

var flagRepwd=repwdBlur();

var flagNickName=nickNameBlur();

var flagTel=telBlur();

var flagEmail=emailBlur();

userNameBlur();

pwdBlur();

repwdBlur();

nickNameBlur();

telBlur();

emailBlur();

if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){

return true;

}

else{

return false;

}

}

html

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

新用戶注冊頁面

	通行證用戶名： @163.com 登錄密碼： 重復登錄密碼： 性別： 男 女 真實姓名： 昵稱： 關聯手機號： 保密郵箱：

function aa(){

var reg = /^[\u4e00-\u9fa5]$/;

var name = document.getElementById("realName").value;

if(reg.test(name)==false){

alert("只能為漢字");

}else{

alert("正確");

}

}

以上所述就是本文的全部內容了，希望大家能夠喜歡。

總結

以上是生活随笔為你收集整理的网易通行证html代码,JavaScript实现仿网易通行证表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。