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/ ...
随机推荐
- unity三维地球模型生成
准备一张贴图 创建材质球 球面坐标系转直角坐标系 x=rsinθcosφ. y=rsinθsinφ. z=rcosθ. 效果如下 脚本如下 using System.Collections; ...
- “但行好事 莫问前程 只问耕耘 不问收获 成功不必在我 而功力必不唐捐” 科技袁人·年终盛典——5G是科技时代非常重要的基础设施
中国的科技实力:用数据对比展示当前中国整体科技实力在国际中的发展水平和未来的发展趋势. 主要分为基础研究和应用研究.其中基础研究通过论文数据进行对比展示,应用研究通过发明专利数据. 又分别结合当今中国 ...
- sql注入02
第一关:基于错误的get单引号字符型注入 第二关:基于错误的get整形注入 第三关:基于错误的get单引号变形字符型注入 第四关:基础错误的双引号字符型注入 第五关: 第六关 第七关:导出文件get字 ...
- [转帖]System Dynamic Management Views
System Dynamic Management Views https://docs.microsoft.com/en-us/sql/relational-databases/system-dyn ...
- 在Ubuntu中搭建Python3的虚拟环境并开始django项目
搭建环境: 1.首先安装virtualenv: pip install virtualenv 2.创建虚拟环境:(指定安装Python3,若不写-p python3,默认安装Python2.7),en ...
- 【jmeter测试范例】001——TCP测试
1.打开Jmeter(或者运行NewDriver.java启动Jmeter) 2.新建一个测试计划 ······ 3.新建线程组 4.设置线程组的参数 1.线程的数量 2.要在多久内完成,即每个请求发 ...
- 【LOJ】#3097. 「SNOI2019」通信
LOJ#3097. 「SNOI2019」通信 费用流,有点玄妙 显然按照最小路径覆盖那题的建图思路,把一个点拆成两种点,一种是从这个点出去,标成\(x_{i}\),一种是输入到这个点,使得两条路径合成 ...
- kindeditor的配置jsp版
1.将kindeditor资源下载下来,点击这里下载: 2.将资源解压,因为是jsp版本所以只需要保留jsp的文件即可,最终目录为下图 3.在所给的jsp的demo中做配置 注意:demo.jsp中引 ...
- 1.2异常处理和服务配置、aop、日志、自定义事件处理
一.异常处理 2.1.数据验证 现在假设说要进行表单信息提交,肯定需要有一个表单,而后这个表单要将数据提交到 VO 类中,所以现在的基本实现如下: 1. 建立一个 Member.java 的 VO 类 ...
- Spark的lazy特性有什么意义呢？
[学习笔记] Spark通过lazy特性有什么意义呢? Spark通过lazy特性,可以进行底层的spark应用执行的优化.在生活中,就像三思而后行.谋定而后动. 文章转载自原文:https://bl ...