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/ ...
随机推荐
- Spring Boot设置定时任务
在 http://start.spring.io/ 中新建一个Group为com.zifeiy,Artifact为task的工程. 然后在TaskApplication中添加注释:@EnableSch ...
- HANA到MySQL数据同步方法!
随着各行各业信息化建设的不断发展,异构数据库间的互通.汇聚,挖掘,分析逐渐被提上日程, TreeSoft数据库管理系统,实现了异构数据库的维护.监控.可视化.自动交换同步.目前支持MySQL,Orac ...
- Centos7系统下以RPM方式如何安装mysql-5.7
检查系统是否装有mariadb rpm -qa | grep mariadb 卸载mariadb 强制卸载mariadb rpm -e --nodeps mariadb-libs-5.5.35-3.e ...
- django 之(五) --- 验证码|富文本|邮箱短信
验证码 在用户登录,注册以及一些敏感操作的时候,我们为了防止服务器被暴力请求,或爬虫爬取,我们可以使用验证码进行过滤,减轻服务器的压力. 原生实现: 库名:pip install Pillow ...
- Python学习笔记——pickle 模块
由于从文本文件中读取出来的内容都会变成字符串,且转换成列表.字典等数据类型比较困难,因此采用pickle模块存储它们 import pickle my_list = [123,3.14,'小甲鱼',[ ...
- Reactor系列(四)subscribe订阅
#java# #reactor# #subcribe# #订阅# 视频讲解 :https://www.bilibili.com/video/av79117693/ FluxMonoTestCase.j ...
- CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...
- js中实现输入框类似百度搜索的智能提示效果
说明:我这里显示的数据采用词典(词典在js中自定义的,看下面文字),主要显示key. 页面元素: <style type="text/css">.search { le ...
- HttpServletResponse对象(转)
Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要 ...
- SpringBoot或者SpringMVC 临时取消配置的视图页面的前后缀
// 重定向到新的jsp页面return "redirect:/index.jsp"; // 请求转发到新的jsp页面 return "forward:/index.js ...