실용적인 JS 양식 유효성 검사 프롬프트 effect_form 특수 효과-JS 튜토리얼-php.cn

실용적인 JS 양식 유효성 검사 프롬프트 effect_form 특수 효과

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

풀어 주다： 2016-05-16 18:42:38

원래의

1525명이 탐색했습니다.

errMsg는 사용자 정의에 편리한 오류 메시지 배열입니다. errName은 오류 메시지에 해당하는 구성 요소 이름의 배열이므로 FormValid.allName은 사용자 정의에서 모든 필드 이름 수준을 사용자 정의할 수 있습니다. 사용됩니다.

<title>양식 확인 프롬프트 효과</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>양식 확인 프롬프트 효과<dt>
<label for="name">
</label>
    </dt>
<dd>계정:<input name="name" id="name" type="text" valid="required" errmsg="用户名不能为空!"><span class="hint" id="errMsg_name">
    <span class="hint-pointer"></span>
    </span>계정 등록(love, love520 등 숫자와 문자만 지원) </dd>
<dt>
<label for="password"> </label>
     
    </dt>
<dd>비밀번호: <input name="password" id="password" type="password" valid="required" errmsg="密码不能为空!"><span class="hint" id="errMsg_password">
    <span class="hint-pointer"></span>
    </span>비밀번호를 입력해주세요. 최소 6자리 ~ 최대 12자리를 입력해주세요</dd> <dt>
<label for="password2"> </label>
     
    </dt>
<dd>비밀번호 확인: <input name="password2" id="password2" type="password" valid="eqaul" eqaulname="password" errmsg="两次密码不同!"><span class="hint" id="errMsg_password2">
    <span class="hint-pointer">
    </span>
    </span>위 비밀번호를 다시 입력해주세요</dd>
<dt>
<label for="email"> </label>
     
    </dt>
<dd>이메일:<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>이메일 주소(Email)를 입력해 주세요. NetEase email@163.com을 사용하는 것이 좋습니다</dd>
<dt>
<label for="year"> </label>
     
    </dt>
<dd>생일:<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>연도<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>월<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>일</span>생일을 입력해주세요</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>QQ 또는 MSN 번호를 입력하세요</dd>
<dt>
<label for="tel"> </label>
    </dt>
<dd>전화번호:<input name="tel" id="tel" type="text" valid="required|isMobile" errmsg="手机不能为空|手机格式不对!"><span class="hint" id="errMsg_tel">
    <span class="hint-pointer"></span>
    </span>전화번호를 입력해주세요</dd>
<dt class="button"></dt> <dd class="button">
    <input type="submit" name="Submit" value=" 提 交 " class="button2">
</dd>
    </dl>
</form>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]