验证表单小案列
使用jquery+正则表达式写的验证表单小案列
这是前台html图片演示
不能为空的验证
格式验证
这是代码片段
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证小案列</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<style type="text/css">
.input{
width: 200px;
}
span{
font-size: 15px;
color: gray;
}
.radio{
display: block;
float: left;
}
table caption{
color: blue;
font-size: 25px;
}
.red{
color: red;
}
.green{
color: green;
}
</style>
<script type="text/javascript">
//输入用户名时的验证
function ckname() {
var reg=/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,6}$/;//2~6为汉字正则表达式
//获取输入的值
var name=$("#name").val();
if(name==""||name==null){
$("#sname").text("用户名不能为空").attr("class","red");
return false;
}
if(!reg.test(name)){
$("#sname").text("用户名格式不正确").attr("class","red");
return false;
}
else{
$("#sname").text("验证通过").attr("class","green");
return true;
}
}
//输入密码时的验证
function ckpassword() {
var reg=/^[\s\S]{6,15}/;//6~15位密码
//获取输入的值
var password=$("#password").val();
if(password==""||password==null){
$("#pname").text("密码不能为空").attr("class","red");
return false;
}
if(!reg.test(password)){
$("#pname").text("密码格式不正确").attr("class","red")
return false;
}
else{
$("#pname").text("验证通过").attr("class","green");
return true;
}
}
//验证密码和确认密码
function ckrepassword() {
//获取输入的值
var password=$("#password").val();
var repassword=$("#repassword").val();
if(password==""||password==null){
$("#rpname").text("密码不能为空").attr("class","red");
return false;
}
if(password!=repassword){
$("#rpname").text("密码不一致").attr("class","red")
return false;
}
else{
$("#rpname").text("验证通过").attr("class","green");
return true;
}
}
//输入手机号时的验证
function ckphone() {
var reg=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//11位手机号,13,14,15...开头的
//获取输入的值
var phone=$("#phone").val();
if(phone==""||phone==null){
$("#hname").text("手机号不能为空").attr("class","red");
return false;
}
if(!reg.test(phone)){
$("#hname").text("手机号格式不正确").attr("class","red")
return false;
}
else{
$("#hname").text("验证通过").attr("class","green");
return true;
}
}
//输入用邮箱时的验证
function ckemail() {
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱
//获取输入的值
var email=$("#email").val();
if(email==""||email==null){
$("#ename").text("邮箱不能为空").attr("class","red");
return false;
}
if(!reg.test(email)){
$("#ename").text("邮箱格式不正确").attr("class","red")
return false;
}
else{
$("#ename").text("验证通过").attr("class","green");
return true;
}
}
//输入电话号时的验证
function ckmodelphone() {
var reg=/\d{3}-\d{8}|\d{4}-\d{7}/;//电话号
//获取输入的值
var modelphone=$("#modelphone").val();
if(modelphone==""||modelphone==null){
$("#mname").text("固定电话不能为空").attr("class","red");
return false;
}
if(!reg.test(modelphone)){
$("#mname").text("固定电话格式不正确").attr("class","red")
return false;
}
else{
$("#mname").text("验证通过").attr("class","green");
return true;
}
}
//输入邮政编码验证
function ckportcode() {
var reg=/[1-9]\d{5}(?!\d)/;//邮政编码
//获取输入的值
var portcode=$("#portcode").val();
if(portcode==""||portcode==null){
$("#poname").text("邮政编码不能为空").attr("class","red");
return false;
}
if(!reg.test(portcode)){
$("#poname").text("邮政编码格式不正确").attr("class","red")
return false;
}
else{
$("#poname").text("验证通过").attr("class","green");
return true;
}
var portcode=$("#portcode").val();
}
</script>
<!-- 总验证 -->
<script type="text/javascript">
function checkAll() {
//获取选择的值
var sex=$("input[type='radio']:checked").val();
if(sex==null||sex==""){
$("#sex").text("忘记选择性别了").attr("class","red")
return false;
}
else{
$("#sex").text("验证通过").attr("class","green");
}
if(ckname()&&ckpassword()&&ckrepassword()&&ckphone()&&ckemail()&&ckmodelphone()&&ckportcode()){
alert("验证通过");
return false;
}
else{
alert("验证通过失败,请你仔细核对");
return true;
}
}
</script>
</head>
<body>
<form action="" onsubmit="return checkAll()">
<table>
<caption>表单验证：</caption>
<tr>
<td>用户名:</td>
<td><input type="text" class="input" onblur="ckname()" id="name">
<span id="sname">长度为2~6位中文组成</span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" class="input" onblur="ckpassword()" id="password">
<span id="pname">长度为6~15位的数字和字母组成</span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" class="input" id="repassword" onblur="ckrepassword()">
<span id="rpname">请保持和上面输入的密码一样</span></td>
</tr>
<tr>
<td>手机号:</td>
<td><input type="text" class="input" id="phone" onblur="ckphone()">
<span id="hname">长度为11位的数字组成</span></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" class="input" onblur="ckemail()" id="email">
<span id="ename">带有@的qq或者其他邮箱</span></td>
</tr>
<tr>
<td>固定电话:</td>
<td><input type="text" class="input" id="modelphone" onblur="ckmodelphone()">
<span id="mname">比如0370—xxx格式</span></td>
</tr>
<tr>
<td>邮政编码:</td>
<td><input type="text" class="input" id="portcode" onblur="ckportcode()">
<span id="poname">国家规定的6位编码</span></td>
</tr>
<tr>
<td>性别:</td>
<td colspan="2">男<input type="radio" name="sex" class="sex" value="男">女<input type="radio" name="sex" class="sex" value="女">
<span id="sex">请选择一个</span>
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
我就不录视频演示了,另外补充一下常用地正则表达式吧
/^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,6}$/;//2~6位汉字正则表达式
/^[\s\S]{6,15}/;//6~15位密码
/^[\s\S]{6,15}/;//6~15位密码
/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;//11位手机号,13,14,15...开头的
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱
/\d{3}-\d{8}|\d{4}-\d{7}/;//老式座机电话号
/[1-9]\d{5}(?!\d)/;//邮政编码
/^[0-9]*$/;//0~9位数字
/^.{3,20}$/;//长度为3-20的所有字符
/^[A-Za-z0-9]+$/;数字和26个英文字母组成
另外附上几个官方的学习地址
jQuery 教程
w3school 在线教程
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
