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

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를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]