本文介绍了一个使用jQuery实现表单验证及提交的例子。当用户点击注册按钮时，将检查用户名、密码和电话号码是否为空，并验证电话号码格式。若验证通过则提交表单。
jquery 通过submit()方法 提交表单示例：
本示例：以用户注册作为例子。使用jquery中的submit()方法实现表单提交。
注：本示例仅提供了对表单的验证，本例只用选用了三个字段作为测试。
用户点击提交按钮时，触发点击事件，会执行所有表单框的验证，如通过验证，则执行submit()方法，对表单内容进行提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#register').click(function(){
var name=$('#name').val();
var pass=$('#pass').val();
var phone=$('#phone').val();
if(name==''){
alert('用户名不能为空');
return false;
}else if(pass==''){
alert('密码不能为空。');
return false;
}else if(phone==''){
alert('手机号码不能为空');
return false;
}else if(phone!=''){
var reg=/^1[3458]\d{9}$/;
if(!reg.test(phone)){
alert('手机号码格式不正确');
return false;
}
}else{
$('form').submit();
}
})
})
</script>
</head>
<body>
<form name="myform" method="post" action="__URL__/register">
<input type="text" name="name" value="" id="name"/>
<input type="password" name="pass" value="" id="pass" />
<input type="text" name="phone" value="" id="phone" />
<input type="submit" name="" value="用户注册" id="register" />
</form>
</body>
</html>
上面的示例：仅对表单框内容进行了简单的验证，
这个验证，可以写得更详细一点。可对用户注册时，用户名是否存在进行验证。
还可以对用户名表单框失去焦点时添加事件，对用户名更详细一步的进行验证。 如：必须以字母开头。长度必须大于多少位。。。在验证的同时，也可以提示信息的文字内容进行改变，如验证出错时，文字以红色显示，验证通过时，让文字以绿色显示。
关于用户名检测与验证，本例仅给大家提供一下思路。
扫一扫
107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
