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/ ...
随机推荐
- SpringBoot： 11.异常处理方式1(自定义异常页面)（转）
SpringBoot 默认的处理异常的机制:SpringBoot 默认的已经提供了一套处理异常的机制.一旦程序中出现了异常 SpringBoot 会向/error 的 url 发送请求.在 sprin ...
- Note 1: Good
Note 1: Good 1. The collection of Linkun's [1]: 1.1coolJoy says "cool" when he heard that ...
- 【ARM-Linux开发】gstreamer教程及在DM3730上的应用
感谢原文作者:goalie高义http://blog.csdn.net/goalietech/article/details/24887955 1 Gstreamer基本概念 GStreamer 是一 ...
- Connect4 Game
How this game is playe can be found at here. public class Connect4 { ][]; public Connect4(char[][] b ...
- Mac安装postgresql和卸载PostgreSQL
1.homebrew安装 brew install postgresql 2.初始化 initdb /usr/local/var/postgres 3.创建数据库及查看数据库 (1)先创建db. cr ...
- Is It A Tree? POJ - 1308（并查集判树）
Problem Description A tree is a well-known data structure that is either empty (null, void, nothing) ...
- celery（芹菜） 异步任务 定时任务 周期任务
什么是celery Celery是一个简单.灵活且可靠的,处理大量消息的分布式系统 专注于实时处理的异步任务队列 同时也支持任务调度 celery架构 celery的架构由三部分组成,消息中间件(me ...
- Django模型（model）系统
Object Relational Mapping(ORM) ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据 ...
- sentinel与hystrix对比
近期有同事再提要不要使用sentinel.所以我就对现在已经用hystrix.先看两者的线程模型.大部分对比项是sentinel开源工程对比的,本人做了一些修改以及增加了一些对比项和说明. 从线程模型 ...
- docker使用的一些需要注意事项
1.程序需要前台运行 程序必须前台执行,如果是java进程的话 不要有nohup 或者使用service的方式进行后台运行 否则可能会出现频繁启动应用的问题 原因就是docker只能管理运行中的 ...