简单的验证

来源：互联网发布：晨曦计价软件视频编辑：程序博客网时间：2024/04/30 06:03

万恶的ie6，不支持display:table之类的，html中不想用table，自己搞css布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" type="text/css" href="css/global.css" /><title>验证</title></head><body><div><form action="/web/registerservlet" method="post"><div class="form_double_input_mods"><div class="form_input_mod"><p>账号</p><input id="account" name="account" type="text"></input><div class="error" id="account_error"></div></div><div class="form_input_mod"><p>密码</p><input id="password" type="password" name="password"></input><div class="error" id="password_error"></div></div><div class="form_input_mod"><p>确认密码</p><input id="password_checked" type="password"name="password_checked"></input><div class="error" id="password_checked_error"></div></div><div class="form_input_mod"><p>姓名</p><input id="name" type="text" name="name"></input><div class="error" id="name_error"></div></div><div class="form_input_mod"><p>身份证号</p><input id="pid" type="text" name="pid"></input><div class="error" id="pid_error"></div></div><div class="form_input_mod"><p>生日</p><input id="birthday" type="text" name="birthday" class="readonly"readonly="readonly"></input><div class="error" id="birthday_error"></div></div><div class="form_input_mod"><p>住址</p><input id="address" type="text" name="address"></input><div class="error" id="address_error"></div></div><div class="form_input_mod"><p>邮编</p><input id="postcode" type="text" name="postcode"></input><div class="error" id="postcode_error"></div></div><div class="form_input_mod"><p>Mail</p><input id="email" type="text" name="email"></input><div class="error" id="email_error"></div></div></div><div><button id="submit" type="submit">确认提交</button></div></form></div><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/validate.js"></script></body></html>

ERROR_SUFFIX = "_error";global_can_submit = false;function updateButtonState() {if (global_can_submit) {ableButton();} else {disableButton();}}function disableButton() {$("#submit").attr("disabled", "disabled");}function ableButton() {$("#submit").removeAttr("disabled");}function validate(id, pattern, errorMsg) {var value = $(id).val();if (-1 == value.search(pattern)) {$(id + ERROR_SUFFIX).html(errorMsg);return false;} else {$(id + ERROR_SUFFIX).html("");return true;}}function accountValidate() {var id = "#account";var errorMsg = "字母或数字且以字母开头";return validate(id, /^[A-Za-z][A-Za-z0-9]+$/, errorMsg);}function passwordValidate() {var id = "#password";var errorMsg;var result;if ($("#password_checked").val() != "") {result = passwordCheckedValidate();}if ($(id).val().length <= 8) {errorMsg = "密码长度需要8位以上";$(id + ERROR_SUFFIX).html(errorMsg);return false;}$(id + ERROR_SUFFIX).html("");errorMsg = "需要有字母和数字之外的字符";return result|| validate(id, /^[A-Za-z0-9]*[^A-Za-z0-9]+[A-Za-z0-9]*$/, errorMsg);}function passwordCheckedValidate() {var id = "#password_checked";var errorMsg = "两次输入的密码不相等";if ($("#password").val() != $(id).val()) {$(id + ERROR_SUFFIX).html(errorMsg);return false;} else {$(id + ERROR_SUFFIX).html("");return true;}}function postcodeValidate() {var id = "#postcode";var errorMsg = "邮政编码应为6位数字";return validate(id, /^\d{6}$/, errorMsg);}function pidValidate() {var id = "#pid";var errorMsg = "身份证输入格式有误";var result;result = validate(id, /^\d{15}$|^\d{18}$|^\d{17}[xX]$/, errorMsg);if (result) {var pid = $(id).val();var birthday = pid.substring(6, 10) + "-" + pid.substring(10, 12) + "-"+ pid.substring(12, 14);$("#birthday").val(birthday);}return result;}function emailValidate() {var id = "#email";var errorMsg = "邮箱格式不正确";return validate(id,/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,errorMsg);}VALIATE_ITEMS = {"#account" : accountValidate,"#password" : passwordValidate,"#password_checked" : passwordCheckedValidate,"#pid" : pidValidate,"#postcode" : postcodeValidate,"#email" : emailValidate};function doValidate(validate_function) {var can_submit = validate_function();updateButtonState(can_submit);}$(function() {for ( var id in VALIATE_ITEMS) {$(id).blur(VALIATE_ITEMS[id]);}$("#account").focus();$("#submit").click(function() {var can_submit = true;for ( var id in VALIATE_ITEMS) {can_submit = can_submit && VALIATE_ITEMS[id]();}return can_submit;});});

.form_double_input_mods {margin: 0;}.form_input_mod {width: 340px;margin: 10px 0 0 0;}.form_input_mod  p {margin: 0;width: 80px;float: left;display: inline;}.form_input_mod  input {width: 180px;margin: 0;display: inline;}.error {color: red;}.readonly {background-color: #FFF5EE;}