零基础学做网站培训介绍

当前位置:

JQuery 验证表单方法与实例代码

网站中经常会有各种各样的表单,用于提交各类信息。如网站注册表单,用户登录表单,用户发布表单等等,这些表单都可以让用户填写并且提交。

JQuery 验证表单

在表单使用过程中,可以使用JQuery 验证表单,对表单项数据进行验证。下面学做网站论坛介绍一下JQuery 验证表单方法与实例代码。

JQuery 验证表单需要使用jQuery click() 方法,用户点击提交按钮时,触发点击事件,会执行所有表单框的验证,如通过验证,则执行submit()方法,对表单内容进行提交。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQUERY验证表单实例</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>
<!--以下是学做网站论坛提供的JQUERY验证表单实例:https://www.xuewangzhan.net/jquery/32339.html-->
<h2>用户注册</h2>
<form name="myform" method="post" action="">
<label>用户名:</label><input type="text" name="name" value="" id="name"/><br/>
<label>密 码:</label><input type="password" name="pass" value="" id="pass" /><br/>
<label>电 话:</label><input type="text" name="phone" value="" id="phone" /><br/>
<input type="submit" name="" value="提交" id="register" />
</form>
</body>
</html>

上面的JQuery 验证表单方法与实例代码:仅对表单框内容进行了简单的验证, 这个验证,可以写得更详细一点。可对用户注册时,用户名是否存在进行验证。还可以对用户名表单框失去焦点时添加事件,实现jquery表单提交前实现同步验证

如:必须以字母开头、长度必须大于多少位……在验证的同时,也可以提示信息的文字内容进行改变,如验证出错时,文字以红色显示,验证通过时,让文字以绿色显示。

发表评论

电子邮件地址不会被公开。 必填项已用*标注