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/ ...
随机推荐
- MySQL数据库相关资料
python 全栈开发,Day60(MySQL的前戏,数据库概述,MySQL安装和基本管理,初识MySQL语句) python 全栈开发,Day61(库的操作,表的操作,数据类型,数据类型(2),完整 ...
- 100% 加速 WebSAMS 3.0 (轉載)
今日已經是WebSAMS Upgrade 的最後一日,已經有99.8% 學校成功upgrade WebSAMS 3.0.但有學校向我們反映WebSAMS 3.0 比2.0 慢,經過我們的Enginee ...
- 从0开始自己用C语言写个shell__01_整体的框架以及fork和exec族函数的理解
最近才忙完了一个操作系统的作业,让我们用C语言实现一个Shell.总的来说,其实就是让我们 对系统调用有比较深的了解. 首先 介绍一下我的Shell 所实现的功能.1.运行可执行程序 即输入某个 标志 ...
- 记录下关于RabbitMQ常用知识点（持续更新）
1.端口及说明: 4369 -- erlang发现口 5672 --client端通信口 15672 -- 管理界面ui端口 25672 -- server间内部通信口 举例说明 我们访问Rabbit ...
- SQL中有关DQL、DML、DDL、DCL的概念与区别？
SQL(Structure Query Language)结构化查询语言是数据库的核心语言,是高级的非过程化编程语言.它功能强大,效率高,简单易学易维护.SQL语言基本上独立于数据库本身.使用的机器. ...
- Map对象，Set对象使用(2)
今天重点见一下Set Set 在我印象里它主要就是去重,Set 是一个值的集合,这个集合中所有的值仅出现一次 Set 属性size:和Map的size一样,返回成员的总数 Set的方法: Set.pr ...
- 【Qt开发】【ARM-Linux开发】 QT在ARM上显示字体的问题
在PC机上利用QT开发的应用程序在设置字体时,在PC上运行,可根据自己的设置,字体随之变大或变小.而移植到ARM上运行时发现,显示字体与所设置的字体不用,字体普遍偏小.经过上网搜索发现,是环境变量字库 ...
- vue组件库element-ui 的Table内容显示不更新
一.问题原因: 因为数组直接赋值不能被 Object.defineProperty 检测到. 二.解决方法 所以应该要使用this.$set(‘对象名’,要修改的属性名,属性值),这样新添加的属性值 ...
- python第二部分
什么数据类型? int 1, 2, 3 用来运算的 float 1.2 str 用来存储一定的信息"" '' list =[1,2 ,3 "有", 是]用来存储 ...
- DS博客作业--07查找
目录 DS博客作业--07查找 1.本周学习总结(0--2分) 1.思维导图 2.谈谈你对查找运算的认识及学习体会. 2.PTA实验作业(6分) 2.1.题目1:6-1 二叉搜索树的操作集 (30 分 ...