在上一篇文章【jQuery表单验证提交：前台验证一】中，已经给大家简单列举了jQuery实现表单验证提交的具体方法代码。那么本节内容就详细的为大家介绍，jQuery实现表单验证提交的具体方法。
主要代码示例如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8/>
<title>jQuery用户注册表单验证代码</title>
<link href=css/jq22.css rel=stylesheet type=text/css/>
<script src=http://www.jq22.com/jquery/jquery-1.10.2.js></script>
<script language='javascript' src=js/jq22.js></script>
</head>
<body>
<div class='body_main'>
<div class='index_box' style='margin-top:20px;'>
<div style=position:fixed;color:red;margin:70px 0 0 450px;font-size:16px;Z-index:100;display:block;
id=hint></div>
<div class='box_title'>
<div class='text_content'>
<h1>jQuery用户注册表单验证代码</h1>
</div>
</div>
<div class='box_main'>
<div id=register class=register>
<form id=form action=check1.php method=post onSubmit=return check();>
<div id=form_submit class=form_submit>
<div class=fieldset>
<div class=field-group>
<label class=required title>手机号码</label>
<span class=control-group id=mobile_input>
<div class=input_add_long_background>
<input class=register_input type=text id=mobile name=mobile maxLength=11 value=
onblur=__changeUserName('mobile');>
</div>
</span>
<label class=tips>仅用于发送服务开通与到期提醒以及紧急故障方便联系到您，绝对保密</label>
</div>
<div class=field-group>
<label class=required title>邮箱</label>
<span class=control-group id=email_input>
<div class=input_add_long_background>
<input class=register_input type=text id=email name=email maxLength=50 value=
onblur=__changeUserName('email');>
</div>
</span>
<label class=tips>请输入您常用的邮箱</label>
</div>
<div class=field-group>
<label class=required title>设置密码</label>
<span class=control-group id=password1_input>
<div class=input_add_long_background>
<input class=register_input type=password id=password1 name=password1 maxLength=20 value=
onblur=checkPwd1(this.value);/>
</div>
</span>
<label class=tips>请使用6~20个英文字母（区分大小写）、符号或数字</label>
</div>
<div class=field-group>
<label class=required title>确认密码</label>
<span class=control-group id=password2_input>
<div class=input_add_long_background>
<input class=register_input type=password id=password2 name=password2 maxLength=20 value=
onblur=checkPwd2(this.value);/>
</div>
</span>
<label class=tips>请输入确认密码，要和上面的密码一致</label>
</div>
</div>
</div>
<div id=div_submit class=div_submit>
<div class='div_submit_button'>
<input id=submit type=submit value=注册 class='button_button disabled'>
</div>
</div>
</form>
</div>
<script type=text/javascript>
function __changeUserName(of) {
var username = $('#' + of).val();
if (of == 'email') {
if (username.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
showTooltips('email_input', '请输入正确的Email地址');
return;
}
}
else {
if (username == '' || !isMobilePhone(username)) {
showTooltips('mobile_input', '请输入正确的手机号码');
return;
}
}
}
function checkPwd1(pwd1) {
if (pwd1.search(/^.{6,20}$/) == -1) {
showTooltips('password1_input', '密码为空或位数太少');
} else {
hideTooltips('password1_input');
}
}
function checkPwd2(pwd2) {
var pas1 = $('#password1').val();
if (pwd2.search(/^.{6,20}$/) == -1) {
showTooltips('password2_input', '密码为空或位数太少');
}
if (pwd2 != pas1) {
showTooltips('password2_input', '两次密码不一致');
}
}
function check() {
hideAllTooltips();
var ckh_result = true;
// if ($('#email').val() == '' || !isEmail($('#email').val())) {
// showTooltips('email_input', '请输入正确的Email地址');
// ckh_result = false;
// }
if ($('#password1').val() == '') {
showTooltips('password1_input', '密码不能为空');
ckh_result = false;
}
if ($('#password2').val() == '') {
showTooltips('password2_input', '确认密码不能为空');
ckh_result = false;
}
if ($('#password2').val() != $('#password1').val()) {
showTooltips('password2_input', '两次密码不一致');
ckh_result = false;
}
if ($('#mobile').val() == '' || !isMobilePhone($('#mobile').val())) {
showTooltips('mobile_input', '手机号码不正确');
ckh_result = false;
}
return ckh_result;
}
function isMobilePhone(value) {
if (value.search(/^(\+\d{2,3})?\d{11}$/) == -1) {
return false;
}
else
return true;
}
function isEmail(value) {
if (value.search(/^[\w\.+-]+@[\w\.+-]+$/) == -1) {
return false;
}
else
return true;
}
</script>
</div>
<div class='box_bottom'></div>
</div>
</div>
</body>
</html>上述代码中，我们简单的写了一个form表单，将前台数据提交到check1.php，提交方式为post，并且给form表单一个点击事件。
当我们点击提交的时候，就会进行一系列信息判断。而当我们没有点击注册也就是没有触发点击事件的话，也会有判断。
如代码中的__changeUserName方法，在此方法中，我们首先通过正则表达式判断邮箱格式是否正确，手机号码是否正确。以及在checkPwd1和checkPwd2方法中，判断密码是否符合要求，是否与第一次密码相同。这些方法都是在没有点击注册按钮时发生的验证。
当然有这些判断也是不够的，所以我们需要写一个点击注册时会发生的验证，如上代码中的check方法，其中我们将每个字段都进行了判断（后台需要的字段都需要进行验证）。
除了上述中点击注册的验证方法外，我们也可以给点击注册的按钮绑定一个事件来判断验证。这里就不一一赘述了。
其中涉及到的js和css代码，在上一篇文章【jQuery表单验证提交：前台验证一】中都有，需要的朋友可以前去参考。
本篇文章就是关于jQuery实现表单验证提交的方法介绍，希望对需要的朋友有所帮助！
想要了解更多前端相关知识，可以关注编程之家jQuery视频教程 、JavaScript视频教程、Bootstrap教程等等相关视频教程，欢迎大家参考学习！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。