js正则表达式处理表单
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <!--<meta name="viewport"-->
6 <!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <link rel="stylesheet" href="css/reset.css">
10 <link rel="stylesheet" href="css/register.css">
11
12 <script src="lib/jquery/jquery-1.12.4.js"></script>
13 <script type="text/javascript">
14 //验证用户名
15 function user(){
16 //获取所填的信息值
17 var name = document.getElementById("txtname").value;
18 var reg = /^[a-zA-Z0-9\u4E00-\u9FA5]{2,6}$/;//定义约束，要求输入英文，数字，下划线，中文
19 if(!reg.test(name)){
20 span_name.innerHTML = "请输入英文,数字,下划线,中文";
21 }else{
22 span_name.innerHTML="格式正确";//验证通过后提示
23 }
24 }
25
26 function passWord(){
27 var pwd = document.getElementById("txtpwd").value;
28 var reg = /^[\d\w]{6,12}$/;
29 if(!reg.test(pwd)){
30 span_pwd.innerHTML = "0至12以内数字,字母或组合";
31 }else{
32 span_pwd.innerHTML="格式正确";
33 }
34 }
35
36 function iphone(){
37 var userTel = document.getElementById("txttel").value;
38 var reg = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
39 if(!reg.test(userTel)){
40 span_tel.innerHTML="请输入正确的手机号";
41 }else{
42 span_tel.innerHTML="格式正确";
43 }
44 }
45
46 </script>
47 </head>
48 <body style="background-color:rgb(153,204,255);width: 1920px;height: 800px;overflow: scroll;overflow-x: hidden">
49 <div id="container" class="container overflow">
50 <div class="header">
51 <ul class="header_menu">
52 <li><a class="menu_format" href="login.php">渔乐</a></li>
53 <li><a class="menu_format" href="index.php">主页</a></li>
54 <li><a class="menu_format" href="about.html">关于</a></li>
55 <li><a class="menu_format" href="faq.html">FAQ</a></li>
56 <li><a class="menu_format" href="download.html">下载</a></li>
57 </ul>
58 </div>
59
60 <div class="content">
61 <div class="register">
62 <div class="nav">
63 <a href="login.php">登录</a>
64 <a href="register.php">注册</a>
65 </div>
66 <form action="reg.php" method="post" onsubmit="return check()">
67 <div class="format">
68 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
69 <div class="register_icon "></div>
70 <input class="register_input" type="text" required placeholder="昵称" name="userName" id = "txtname" onBlur="user()">
71 </div>
72 <label class="register_label" id="span_name"></label>
73 </div>
74
75 <div class="format">
76 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
77 <div class="register_icon2"></div>
78 <input class="register_input" type="password" required placeholder="密码(6-16个字符组成,区别大小写)" name="userPassword" id = "txtpwd" onBlur="passWord()">
79 </div>
80 <label class="register_label" id="span_pwd"></label>
81 </div>
82
83 <div class="format">
84 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
85 <div class="register_icon3"></div>
86 <input class="register_input" type="tel" required placeholder="填写常用手机号码" name="userTel" id="txttel" onBlur="iphone()">
87 </div>
88 <label class="register_label" id="span_tel"></label>
89 </div>
90
91 <div class="format">
92 <div style="border: 2px solid white;float: left;padding: 2px;box-sizing: border-box">
93 <div class="register_icon4">
94 <!--通过增加或者减少display2Block类来实现按钮的切换-->
95 <a id="toggle1" class="display display2Block " href="#" style="width: 100%;height: 100%;background-color:#09f;">点击获取</a>
96 <a id="toggle2" class="display " href="#" style="width: 100%;height: 100%;"><p style="display: inline">60</p>秒后重新获取</a>
97 </div>
98 <input class="register_input register_input2" type="text" required placeholder="请输入短信验证码" name="VerificationCode">
99 </div>
100 <label class="register_label">验证码错误</label>
101 </div>
102 <div class="format register_button">
103 <input class="register_button" value="注册" type="submit" style="border: none;">
104 </div>
105 </form>
106 <div class="outLink">
107 <div class="outLink_tips"></div>
108 <div class="register2QQ">
109 <a href="" style="display: block;width: 40px;height: 33px;"></a>
110 </div>
111 <div class="register2WX">
112 <a href="#" style="display: block;width: 40px;height: 33px;"></a>
113 </div>
114 </div>
115 </div>
116
117 </div>
118 </div>
119
120
121 <script src="js/register.js"></script>
122 <script src="js/pagescreen.js"></script>
123 </body>
124 </html>
js正则表达式处理表单的更多相关文章
- JS正则表达式验证表单
一.解释一些符号相关的意义 1. /^$/ 这个是个通用的格式. ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 2. 里面输入需要实现的功能. ...
- 第十七篇 JS验证form表单
JS验证form表单 这节课做一个实际的,项目里会遇到的东西,例如登录页面,我们输入‘用户名’和‘密码’或者‘手机号’还有‘验证码’等等,它都会做一个前端验证,比如验证码,是6位有效数字组成,那么 ...
- JS、jqueryie6浏览器下使用js无法提交表单的解决办法
-----------------------JS.jqueryie6浏览器下使用js无法提交表单的解决办法---------------------------------------------- ...
- js/jquery/插件表单验证
媳妇要学js,就收集一些资料给她. 1.js 表单验证 : http://hi.baidu.com/yanchao0901/item/161f563fb84ea5433075a1eb 2.jquery ...
- js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
- 通过JS模拟select表单，达到美化效果[demo][转]
转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...
- JS 提交form表单
源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...
- 通过JS模拟select表单，达到美化效果[demo]
.m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...
- 表单验证—js循环所有表单验证
[封装为表单验证的专用js,所有表单页面都可以调用] 1.表单 <form id="regForm" method="post" action=" ...
随机推荐
- PRML 概率分布
本文地址:https://www.cnblogs.com/faranten/p/15917369.html 转载请注明作者与出处 1 二元变量 1.1 伯努利分布与二项分布 考虑一个最基本的试验: ...
- 都 2022 了，还不抓紧学 typeScript ?
Hi,我是前端人,今日与君共勉! 本篇文章主要介绍的是什么是 typeScript ? typeScript 与 javaScript 有什么关系呢?我们为什么要学习 typeScript ? 一.什 ...
- logstash根据日志关键词报警
logstash是可以根据日志级别,日志类型进行报警通知的. 这次精简教程,排除filebeat自带的#include_lines: ['^ERR', '^WARN']写法,直接使用logstash报 ...
- [题解]BZOJ1004 序列函数
原题找不到了,应该是usaco之类的题目吧.给一个可以交题的链接:http://www.cqoi.net:2012/problem.php?id=1004 思路:将素数一个一个往里乘,保证扫描的顺序是 ...
- 数据分析六个步骤，一款BI工具即可全部搞定
数据分析是将大量的数据转化为有价值的信息,以求最大化地利用数据的功能,发挥数据的作用.数据分析的类型可以分为现状分析.原因分析.预测分析,按流程分为以下6个步骤: (1) 明确数据分析目的和思路 明确 ...
- C#爬虫（04）：HtmlAgilityPack解析html文档
原文链接 https://www.cnblogs.com/springsnow/p/13278283.html 目录 一.爬虫概述 1.使用浏览器获取页面源码 2.HTML解析组件 二.HtmlAgi ...
- Chrome：查看HTTP请求的header信息
1.打开Google浏览器Chrome,通过F12进入开发者工具,进入Network模块下,此时由于我们还没有进行任何HTTP请求,所以这个页面下还是空空如也 2.随便通过某个搜索引擎搜索一下,比如通 ...
- tar包压缩时相对路径问题
一.问题描述 现在有一个需求,不知道该如何才能实现压缩: tar -czvf /home/futong/test/logs.tar.gz /home/futong/test/logs 打开压缩包发现 ...
- pandas 中dataframe的操作
先用pandas生成数据, import numpy as npimport pandas as pddf= pd.DataFrame(np.arange(30).reshape(6,5),colum ...
- 昇思MindSpore全场景AI框架 1.6版本，更高的开发效率，更好地服务开发者
摘要:本文带大家快速浏览昇思MindSpore全场景AI框架1.6版本的关键特性. 全新的昇思MindSpore全场景AI框架1.6版本已发布,此版本中昇思MindSpore全场景AI框架易用性不断改 ...