关于表单验证的问题？
写表单验证时把每个验证都写的是input onblur事件，
出现一个问题，如果用户直接按那个a标签提交就不走每个input onblur事件，
难道我要重新写每个事件吗？
跟怎样给这个a标签加个点击事件？
<form action="#" method="post">
<span class="errorMsg"></span>
<p>
<label>手机号码：</label>
<input id="form_phone" type="text" tabindex="1" autocomplete="off">
<em class='error' style="display: none;"></em>
<em class='success' style="display: none;"></em>
<span class="info_tips">注册成功后请直接用手机号登录</span>
<a href="javascript:;" id="sendsms" class="mt5 ml10 blue_big_btn" style="display:none;">发送验证码</a>
</p>
<p>
<label>短信验证码：</label>
<input id="phone_code" name="phone_code" type="text" tabindex="2" autocomplete="off">
<em class='error' style="display: none;"></em>
<em class='success' style="display: none;"></em>
<span class="info_tips" >请输入您收到的短信验证码</span>
</p>
<p>
<label>设置密码：</label>
<input id="psw1" name="password" type="password" tabindex="3">
<em class='error' style="display: none;margin-top: -15px;margin-left: 15px;"></em>
<em class='success' style="display: none;margin-top: -15px;margin-left: 15px;"></em>
<span class="info_tips pw_spec_tips">6-16位，字母（区分大小写）、数字、符号</span>
<span id="pw_strength"></span>
</p>
<p>
<label>确认密码：</label>
<input id="psw11" name="new_password" type="password" tabindex="4" disabled="">
<em class='error' style="display: none;"></em>
<em class='success' style="display: none;"></em>
<span class="info_tips">请再次输入您的密码</span>
</p>
<a id="confirm1" class="blue_btn">立即注册</a>
</form>
$("#phone_code").on("blur",function(){
if($(this).val() == ""){
$(this).next(".error").css("display","inline-block");
$(this).parent().find(".success").css("display","none");
$(this).parent().find(".info_tips").text("不能为空").css("color","#FF0000");
}
else if(!phone_code_reg.test($(this).val())){
$(this).parent().find(".success").css("display","none");
$(this).next(".error").css("display","inline-block");
$(this).parent().find(".info_tips").text("输入的短信验证码格式不正确").css("color",
"#FF0000");
}
else{
$(this).parent().find(".error").css("display","none");
$(this).parent().find(".success").css("display","inline-block");
$(this).parent().find(".info_tips").text("");
}
});
....
jquery web前端开发 HTML css JavaScript
wenlove
9 years, 5 months ago
Answers
框架
用个框架jQuery Validation，分分钟搞定
no框架
不想用框架，那么你的代码需要优化
HTML结构
重复的结构太多，css写在行内，混乱不堪，建议调整
<form action="#" method="post" id="form">
<span class="errorMsg"></span>
<p>
<label>手机号码：</label>
<input id="form_phone" type="text" tabindex="1" autocomplete="off" />
<span class="info_tips">注册成功后请直接用手机号登录</span>
<a href="javascript:;" id="sendsms" class="mt5 ml10 blue_big_btn" style="display:none;">发送验证码</a>
</p>
<p>
<label>短信验证码：</label>
<input id="phone_code" name="phone_code" type="text" tabindex="2" autocomplete="off" />
<span class="info_tips" >请输入您收到的短信验证码</span>
</p>
<p>
<label>设置密码：</label>
<input id="psw1" name="password" type="password" tabindex="3" />
<span class="info_tips pw_spec_tips">6-16位，字母（区分大小写）、数字、符号</span>
<span id="pw_strength"></span>
</p>
<p>
<label>确认密码：</label>
<input id="psw11" name="new_password" type="password" tabindex="4" disabled="" />
<span class="info_tips">请再次输入您的密码</span>
</p>
<button id="confirm1" class="blue_btn" type="submit">立即注册</button>
</form>
js
你只贴了一个验证码的代码，如果没看错的话，这样的代码至少还有三个，重复的内容太多，建议调整
var $form = $('#form');
var $phoneCode = $('#phone_code');
var phone_code_reg = /^[0-9]{6}$/;
$phoneCode.on('blur', validPhoneCode);
$form.on('submit', submit);
//表单提交
function submit() {
return [
validPhoneCode()
].every(function (flag) {
return flag;
});
}
//校验手机验证码
//@return {bool}
function validPhoneCode() {
var val = $phoneCode.val();
if (!val) {
showError($phoneCode, '不能为空');
return false;
}
if (!phone_code_reg.test($(this).val())) {
showError($phoneCode, '输入的短信验证码格式不正确');
return false;
}
showSuccess($phoneCode);
return true;
}
//校验失败
//@param el {jQuery}
//@param text {String}
function showError(el, text) {
var $parent = el.parent();
$parent.find('.error').length ? $.noop() : el.after('<em class="error">error</em>');
$parent.find('.success').remove();
$parent.find('.info_tips').text(text).css("color", "#FF0000");
}
//校验成功
//@param el {jQuery}
function showSuccess(el) {
var $parent = el.parent();
$parent.find('.success').length ? $.noop() : el.after('<em class="success">success</em>');
$parent.find('.error').remove();
$parent.find('.info_tips').text('');
}
像这种校验，还是建议你用框架。不用框架的话，写起来蛋疼。以上代码纯属参考！
幽霊SAMA
answered 9 years, 5 months ago
