Practical JS form validation prompt effect_form special effects-JS Tutorial-php.cn

Practical JS form validation prompt effect_form special effects

WBOY

Release： 2016-05-16 18:42:38

Original

1468 people have browsed it

errMsg is an array of error messages, which is convenient for customization. errName is an array of component names corresponding to error messages, so that the display mode can be customized. FormValid.allName records all field name levels with validation rules. In customization can be used.

<title>Form verification prompt effect</title>
<style type="text/css"> 
body{ color:#666666; font-size:12px} 
h1{ font-size:20px;} 
input{ border:#999999 1px solid; background-color:#FFFFEE} 
.button2{ background-color:#FF9900; border-bottom:#E34A00 2px solid;border-right:#E34A00 2px solid; border-top:#FFB693 2px solid;border-left:#FFB693 2px solid; color:#FFFFFF; font-weight:bold} 
dl { 
font:normal 12px/15px Arial; 
position: relative; 
width: 350px; 
} 
dt { 
clear: both; 
float:left; 
width: 80px; 
padding: 4px 0 2px 0; 
text-align: left; 
} 
dd { 
float: left; 
width: 200px; 
margin: 0 0 8px 0; 
padding-left: 6px; 
}

.hint { 
display: none; 
position: absolute; 
right: -160px; 
width: 200px; 
margin-top: -4px; 
border: 1px solid #c93; 
padding: 10px 12px; 
background: #ffc url(/upload/2009-11/20091104144511488.gif) no-repeat -10px 5px; 
}

.hint .hint-pointer { 
position: absolute; 
left: -10px; 
top: 5px; 
width: 10px; 
height: 19px; 
background: url(/upload/2009-11/20091104144511488.gif) left top no-repeat; 
} 
</style>

<h1>

</h1>
<form action="" method="post" onsubmit="return validator(this)">
<dl>Form verification prompt effect<dt>
<label for="name">
</label>
    </dt>
<dd>Account:<input name="name" id="name" type="text" valid="required" errmsg="用户名不能为空!"><span class="hint" id="errMsg_name">
    <span class="hint-pointer"></span>
    </span>Register an account (only supports numbers and letters, such as: love, love520) </dd>
<dt>
<label for="password"> </label>
     
    </dt>
<dd>Password: <input name="password" id="password" type="password" valid="required" errmsg="密码不能为空!"><span class="hint" id="errMsg_password">
    <span class="hint-pointer"></span>
    </span>Please enter your password, please enter at least 6 digits and maximum 12 digits </dd> <dt>
<label for="password2"> </label>
     
    </dt>
<dd>Confirm password: <input name="password2" id="password2" type="password" valid="eqaul" eqaulname="password" errmsg="两次密码不同!"><span class="hint" id="errMsg_password2">
    <span class="hint-pointer">
    </span>
    </span>Please enter the above password again</dd>
<dt>
<label for="email"> </label>
     
    </dt>
<dd>Email:<input name="email" id="email" type="text" valid="required|isEmail" errmsg="Email不能为空|Email格式不对!"><span class="hint" id="errMsg_email">
    <span class="hint-pointer"></span>
    </span>Please enter your email address (Email), it is recommended to use NetEase email@163.com</dd>
<dt>
<label for="year"> </label>
     
    </dt>
<dd>Birthday:<select id="year" name="year"><option value="1983">
    </option>
<option value="1984">
            </option>1983<option value="1985">
            </option>1984</select>
            <select name="m" id="m">1985<option value="5">
        </option>Year<option value="6">
     </option>5<option value="7">
     </option>6<option value="12">
     </option>7</select>
     <select name="d" id="d">12<option value="5">
</option>Month<option value="6">
     </option>5<option value="7">
     </option>6<option value="12">
     </option>7</select>
     <span class="hint">12<span class="hint-pointer">
</span>Day</span>Please enter your birthday</dd>
<dt>
<label for="qq">
    </label>
    </dt>
<dd>QQ/MSN:<input name="qq" id="qq" type="text" valid="required" errmsg="没有填写QQ或MSN"><span class="hint" id="errMsg_qq">
    <span class="hint-pointer"></span>
    </span>Please enter your QQ or MSN number</dd>
<dt>
<label for="tel"> </label>
    </dt>
<dd>Phone:<input name="tel" id="tel" type="text" valid="required|isMobile" errmsg="手机不能为空|手机格式不对!"><span class="hint" id="errMsg_tel">
    <span class="hint-pointer"></span>
    </span>Please enter your phone number</dd>
<dt class="button"></dt> <dd class="button">
    <input type="submit" name="Submit" value=" 提 交 " class="button2">
</dd>
    </dl>
</form>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]