jQuery表单验证正则表达式-简单
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type ="text/javascript">
//用户名：
function names() {
var name = document.getElementById("name").value;
var regrx = /^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/;
if (!regrx.test(name)) {
document.getElementById("span1").style.color = "#f00";
document.getElementById("span1").innerHTML = "请您填写由字母，数字，下划线，点，减号组成的4-18位字符，以数字，字母开头或者结尾！";
return false;
}
document.getElementById("span1").innerHTML = "填写正确！";
document.getElementById("span1").style.color = "#000";
return true;
}
//昵称
function usenames() {
var regx = /^([\u4e00-\u9fa5]|\w)+$/;
var uesname = document.getElementById("uesname").value;
var regx2 = /[\u4e00-\u9fa5]/g;
var six = uesname.replace(regx2, "aa").length;
if (!regx.test(uesname)) {
document.getElementById("span2").style.color = "#f00";
document.getElementById("span2").innerHTML = "请您填写包含汉字，字母，数字，下划线的4-20位字符，汉字占两个字符！";
return false;
}
if (six<4||six>20) {
document.getElementById("span2").style.color = "#f00";
document.getElementById("span2").innerHTML = "请您填写包含汉字，字母，数字，下划线的4-20位字符，汉字占两个字符！";
return false;
}
document.getElementById("span2").innerHTML = "填写正确！";
document.getElementById("span2").style.color = "#000";
return true;
}
//邮箱
function mails() {
var mail = document.getElementById("mail").value;
var regx = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if (!regx.test(mail)) {
document.getElementById("span3").style.color = "#f00";
document.getElementById("span3").innerHTML = "请您填写邮箱域名:@域名，如good@tom.com，win@sina.com.cn";
return false;
}
document.getElementById("span3").innerHTML = "填写正确！";
document.getElementById("span3").style.color = "#000";
return true;
}
//密码
function pwds() {
var pwd = document.getElementById("pwd").value;
var regrx = /^[a-zA-Z0-9]{4,10}$/;
if (!regrx.test(pwd)) {
document.getElementById("span4").style.color = "#f00";
document.getElementById("span4").innerHTML = "请您填写由英文字母和数字所组成的4-10位字符！";
return false;
}
document.getElementById("span4").innerHTML = "填写正确！";
document.getElementById("span4").style.color = "#000";
return true;
}
//确认密码
function dearpwds() {
var dearpwd = document.getElementById("dearpwd").value;
var pwd = document.getElementById("pwd").value;
if (pwd!=dearpwd) {
document.getElementById("span5").style.color = "#f00";
document.getElementById("span5").innerHTML = "您输入的密码不一致，请确认是否一致！";
return false;
}
if (dearpwd.trim()=="") {
document.getElementById("span5").innerHTML = "不能为空！"; return false;
}
document.getElementById("span5").innerHTML = "填写正确！";
document.getElementById("span5").style.color = "#000";
return true;
}
//手机号码
function phones() {
var phone = document.getElementById("phone").value;
var reg = /^(13|15|18)\d{9}$/;
if (!reg.test(phone)) {
document.getElementById("span6").style.color = "#f00";
document.getElementById("span6").innerHTML = "请您填写手机号11位数字，且以13,15,18开头！";
return false;
}
document.getElementById("span6").innerHTML = "填写正确！";
document.getElementById("span6").style.color = "#000";
return true;
}
//身份证
function idcards() {
var idcard = document.getElementById("idcard").value;
var regx = /^\d{15}$|^\d{18}$/;
if (!regx.test(idcard)) {
document.getElementById("span7").style.color = "#f00";
document.getElementById("span7").innerHTML = "请您填写由15位数字或者18位数字组成！";
return false;
}
document.getElementById("span7").innerHTML = "填写正确！";
document.getElementById("span7").style.color = "#000";
return true;
}
function butts() {
if (names() && phones() && idcards() && dearpwds() && pwds() && mails() && usenames()) {
return true;
}
document.getElementById("span8").style.display = "inline";
return false;
}
</script>
</head>
<body>
<form action="HtmlPage.html" method="post" onsubmit="return butts()">
<fieldset>
<legend>请填写用户信息</legend>
<p>用户名：
<input type="text" id="name" onblur="names()" />
<span id="span1" style="color:#ccc">由字母，数字，下划线，点，减号组成的4-18位字符，以数字，字母开头或者结尾！</span>
</p>
<p>昵称：
<input type="text" id="uesname" onblur="usenames()" />
<span id="span2" style="color:#ccc">包含汉字，字母，数字，下划线的4-20位字符，汉字占两个字符</span>
</p>
<p>邮箱：
<input type="text" id="mail" onblur="mails()" />
<span id="span3" style="color:#ccc">邮箱域名@域名，如good@tom.com，win@sina.com.cn</span>
</p>
<p>密码：
<input type="text" id="pwd" onblur="pwds()"/>
<span id="span4" style="color:#ccc">由英文字母和数字所组成的4-10位字符</span>
</p>
<p>确认密码：
<input type="text" id="dearpwd" onblur="dearpwds()"/>
<span id="span5" style="color:#f00"></span>
</p>
<p>手机号码：
<input type="text" id="phone" onblur="phones() "/>
<span id="span6" style="color:#ccc"> 手机号11位数字，且以13,15,18开头</span>
</p>
<p>身份证：
<input type="text" id="idcard" onblur="idcards()" />
<span id="span7" style="color:#ccc">由15位数字或者18位数字组成</span>
</p>
<p>
<input type="submit" id="submits" />
<span id="span8" style="color:#f00;display:none;" >您好像有地方填错了哦！</span>
</p>
</fieldset>
</form>
</body>
</html>
jQuery表单验证正则表达式-简单的更多相关文章
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
随机推荐
- 使用 bash 脚本把 GCE 的数据备份到 GCS
目录 一.Google Cloud Storge 介绍 1.1.四种存储类别的比较 1.2.需求 1.3.给虚拟机添加授权认证 二.备份操作 2.1 创建存储分区 2.2 上传对象到存储分区 2.3 ...
- JQuery Validate - 自定义js验证
(function (window, $) { var validResult = {}; var checkObjs = { /** * 检查输入的一串字符是否全部是数字 * 输入:str Stri ...
- 【VS开发】CString 转为 char *方法大全
[VS开发]CString 转为 char *方法大全 标签(空格分隔): [VS开发] 方法1: CString strTemp; char szTemp[128]; strTemp = _T(&q ...
- Java学习笔记-包装类
基本数据类型对象包装类的最常见作用,就是用于基本数据类型和字符串类型之间做转换 包装类的由来 为了解决8种基本数据类型的变量不能当成Object类型变量使用的问题,Java提供了包装类(Wrapper ...
- StormUI各参数详解
参考:http://www.malinga.me/reading-and-understanding-the-storm-ui-storm-ui-explained/
- SQL SERVER导入EXCEL文件：无法创建链接服务器 "(null)" 的 OLE DB 访问接口 "Microsoft.Ace.OLEDB.12.0" 的实例。
[方法一] --开启导入功能 exec sp_configure 'show advanced options',1 reconfigure exec sp_configure 'A ...
- Python+requests重定向和追踪
Python+requests重定向和追踪 一.什么是重定向 重定向就是网络请求被重新定个方向转到了其它位置 二.为什么要做重定向 网页重定向的情况一般有:网站调整(如网页目录结构变化).网页地址改变 ...
- 【转载】Jave开发手册之正则表达式预编译
今天又水一篇,java开发手册华山版 一.编程规约 (九)其它 第一条 解释:Pattern要定义为static final静态变量,以避免执行多次预编译. 错误用法: // 没有使用预编译 priv ...
- Oracle笔记2
24.复杂查询的三道题 # 案例一:列出与SCOTT从事相同工作的所有员工及部门名称.人数.平均工资 GROUP BY使用限制: 查询语句中没有GROUP BY,则SELECT子句中只能出现统计函数; ...
- 安装gcc过程中遇到相互依赖的问题
在离线安装gcc的时候需要安装一些包,但是在安装 glibc-common glibc遇到一个很恶心的问题,这两个包相互依赖. 经查询才发现需要一起安装这两个依赖包.真是有趣的很 rpm -iv ...