帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 精简表单验证 (正则表达式与jQquery的完美结合)
精简表单验证 (正则表达式与jQquery的完美结合)
浏览:789次
-
评论:0次
-
发布时间:2017-06-02
Html
Css
Js
JQuery表单验证
帐号:
设置密码:
确认密码:
性别:
男
女
邮箱:
手机:
网站:
//账号验证 function zhanghao_yz() { var reg = /^[A-Za-z]\w+$/; //正则表达式 必须以字母开头的账号 if ($("#account").val().search(reg) == -1) { $("#account").next().html("账号必须是以 字母开头的 可以包含数字字母下划线的字符串"); /*alert("密码只能是6-9位数字");*/ return false; } else { $("#account").next().html("账号验证成功"); /* alert("验证成功");*/ return true; } return true; } //密码验证 让其只能是 6位 纯数字的密码 function password_check() { var reg = /^\d{6,9}$/; //正则表达式 必须以数字开头和结尾 6-9位 if ($("#passwordId").val().search(reg) == -1) { $("#passwordId").next().html("密码只能是6-9位数字"); /*alert("密码只能是6-9位数字");*/ return false; } else { $("#passwordId").next().html("密码验证成功"); /* alert("验证成功");*/ return true; } return true; } function password_check2() { var reg = /^\d{6,9}$/; if ($("#passwordId2").val().search(reg) == -1) { $("#passwordId2").next().html("密码只能是6-9位数字"); /*alert("密码只能是6-9位数字");*/ return false; } else { if ($("#passwordId").val() !== $("#passwordId2").val()) { $("#passwordId2").next().html("两次输入的密码不相同"); return false; } else { $("#passwordId2").next().html("密码确认成功"); return true; } } return true; } //邮箱验证 function email_check() { var reg = /^\w+@\w+(\.\w+){1,2}$/; //因为邮箱 xxx @ xxx . xxx xxx 可以是 数字字母下划线 结束 可以 是 .com 或者 .com.cn if ($("#emailId").val().search(reg) == -1) { $("#emailId").next().html("邮箱格式不正确 xxx @ xxx . xxx"); /*alert("密码只能是6-9位数字");*/ return false; } else { $("#emailId").next().html("邮箱验证成功"); return true; } return true; } //手机验证 function mobile_check() { var reg = /^(13|15|17|18)\d{9}$/; //因为邮箱 xxx @ xxx . xxx xxx 可以是 数字字母下划线 结束 可以 是 .com 或者 .com.cn if ($("#mobile").val().search(reg) == -1) { $("#mobile").next().html("手机格式不正确 应该是 1 (3|5|7|8)xxx xxx xxx 总共11位的纯数字"); /*alert("密码只能是6-9位数字");*/ return false; } else { $("#mobile").next().html("手机验证成功"); return true; } return true; } //网站验证 function web_check() { var eg3 = /^http:\/\/www\..+?(\.\w+){1,2}$/g; var str = $("#web").val(); if (str.search(eg3) !== -1) //找到了 就 不等于 -1了 { $("#web").next().html("网站验证正确"); return true; } else { $("#web").next().html("注意网站的书写格式"); return false; } return true; } $("#account").blur(zhanghao_yz); $("#passwordId").blur(password_check); $("#passwordId2").blur(password_check2); $("#emailId").blur(email_check); $("#mobile").blur(mobile_check); $("#web").blur(web_check); function tijiao() { /* alert( typeof (zhanghao_yz() && password_check() && password_check2() && email_check() && mobile_check() && web_check())); * 这里弹出 boolean 类型的值 * */ if ($("#account").val() == "" || $("#passwordId").val() == "" || $("#name_shengao").val() == "" || $("#emailId").val() == "" || $("#mobile").val() == "" || $("#wangzhan").val() == "") { $("#reset").next().html("看看你是不是填完了"); return false; } if (!(zhanghao_yz() && password_check() && password_check2() && email_check() && mobile_check() && web_check())) { //只要有其中一项 返回值是 false 就会 进入 这个 语句 $("#reset").next().html("上面的验证都通过了吗?"); return false; } else { $("#reset").next().html("好的 验证通过了。"); return true; } return true; } $("#myform").submit(function() { return tijiao(); });
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>精简表单验证 (正则表达式与jQquery的完美结合)-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:精简表单验证 (正则表达式与jquery的完美结合),无乱七八糟的样式,直截了当的用正则表达式完成最高效的前端,表单验证。
JS输入框数字加减
jQuery写的京东轮播图,没写插件
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
789
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值