用css和js写表单验证,使用javascript及正则表达式实现表单验证(CSS,js练习)
标签:
注册界面
body{margin:0px;padding:0px;}
.zc{
width:380px;
height:600px;
margin:0 auto;
line-height:40px;
}
.main{
font-size:20px;
border:1px solid #000;
padding:10px;
background-color:#FFC;
}
.top{
font-size:30px;
font-weight:bold;
color:blue;
text-align:center;
}
用户注册
账 号:
密 码:
确认密码:
姓 名:
性 别: 男
女
年 龄:
电子邮件:
固定电话:
手机号码:
function checkForm(){
var id=document.getElementById("userId").value;//获取值
var mm=document.getElementById("userPw").value;
var mm1=document.getElementById("userPw1").value;
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var email=document.getElementById("email").value;
var tel=document.getElementById("tel").value;
var phone=document.getElementById("phone").value;
var point1=document.getElementById("point1"); //获取指向
var point2=document.getElementById("point2");
var point3=document.getElementById("point3");
var point4=document.getElementById("point4");
var point5=document.getElementById("point5");
var point6=document.getElementById("point6");
var point7=document.getElementById("point7");
var point8=document.getElementById("point8");
var idReg=/^[a-zA-Z]{1}(\w){7,15}$/;//正则表达式规则
var mmReg=/^(\w){8,16}$/;
var nameReg=/^(\w){4,10}$/;
var ageReg=/^[1-9]{1}[0-9]{0,1}$/;
var emailReg=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
var telReg=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
var phoneReg=/^[1]{1}[0-9]{10}$/;
if(!idReg.test(id)){ //idReg.test(id)验证值是否满足规则,满足返回true,不满足返回false。
alert("请输入以字母开头且由字母、数字及下划线组成的8-16位账号");
return false;
}
point1.innerHTML="输入正确"; //提示在后面显示
if(!mmReg.test(mm)){
alert("请输入由字母、数字及下划线组成的8-16位密码");
return false;
}
point2.innerHTML="输入正确";
if(mm!=mm1){
alert("两次输入不正确");
return false;
}
point3.innerHTML="输入正确";
if(!nameReg.test(name)){
alert("请输入由字母、数字及下划线组成的4-10位姓名");
return false;
}
point4.innerHTML="输入正确";
if(!ageReg.test(age)){
alert("请输入正确的数字");
return false;
}
point5.innerHTML="输入正确";
if(!emailReg.test(email)){
alert("请输入正确的email地址");
return false;
}
point6.innerHTML="输入正确";
if(!telReg.test(tel)){
alert("请输入正确的电话号码");
return false;
}
point7.innerHTML="输入正确";
if(!phoneReg.test(phone)){
alert("请输入正确的手机号码");
return false;
}
point8.innerHTML="输入正确";
return true;
}
标签:
用css和js写表单验证,使用javascript及正则表达式实现表单验证(CSS,js练习)相关推荐
- php判断表单修改内容,JavaScript判断用户是否对表单进行了修改的方法_javascript技巧...
本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用 ...
- php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...
- php九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码_javascript技巧...
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...
- 验证(Javascript和正则表达式)
昨天写了验证(C#和正则表达式),今天又写了个js版的验证.现在贴出来,为了方便自己查阅,同时也希望能给需要的人帮助和一些启发.由于今天才开始接触js,所以可能会有一些错漏,希望大家能批评指正. va ...
- html表单验证用正则表达式,JavaScript 使用正则表达式进行表单验证的示例代码
搜索热词 JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 function regIsDigit(fData) { var reg = new RegExp(& ...
- 九九乘法表居中c语言,JavaScript实现九九乘法表的简单实例
每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 J ...
- node js 写按键精灵_带有按键的Node.js Raw模式
node js 写按键精灵 I find the stuff that people are doing with Node.js incredibly interesting. You here ...
- html正则表达式确认密码,如何使用正则表达式在流星中验证确认密码
我使用meteor开发我的应用程序.我需要验证我的注册表单,以便限制用户.现在,我在我的注册表单中输入密码并确认密码.我正在使用正则表达式进行验证.如何使用正则表达式在流星中验证确认密码 我的代码是: ...
- Atitit.js模块化 atiImport 的新特性javascript import
Atitit.js模块化 atiImport 的新特性javascript import 1. 常见的js import规范amd ,cmd ,umd1 1.1. Require更多流行3 2. at ...
最新文章
- gitLab创建自己的私有库
- 推荐算法炼丹笔记:标签工程
- C++等级考试知识点总结
- html 最小长度单位,html见长度单位尺寸单�?CSS布局HTML
- python内点法_python射线法判断一个点在图形区域内外
- 【论文笔记】基于LSTM的问答对排序
- android获取组件id,Android 获取控件id的三种方式
- Win Server 2012 R2 安装SQL 2016先决条件
- NC文件数据提取完成(1.16)
- 几何实体图形保存成stl格式的ascII和二进制文。用Vc++语言读入文件,给三角网格坐标值乘以2,并保存到另一stl文件。输出完成工作所用的执行时间
- win10中修改mac地址
- Canny边缘检测非极大值抑制法在双立方插值(Bicubic)图像边缘优化
- H5 在iPhone真机上调试H5页面
- 手机通讯录分组名称_个人通讯录如何批量导入/导出
- linux中 . .bash_profile是什么意思
- 贷款用户逾期问题Task1
- 京东疯狂月薪36k程序员最新Java面试题(常见面试题及答案汇总)
- 【苹果家庭iMessage推送】Aupperpushslcertificate或ProductPushsCertificate证书不可以过期
- F1意大利站,阿隆索在法拉利的主场夺冠
- 【java】斐波那契数列
热门文章
- wits数据格式_WITS标准
- 网易云音乐刷听歌量_网易云音乐极速版悄然上线!听歌体验同之前没有差别
- mysql exists依赖查询_MySQL EXISTS 和 NOT EXISTS 子查询
- 牛客网编程题06--取近似值
- [译转] eBPF 概念和基本原理
- 如何证明CPU的乱序执行(Out-of-order Execution)?
- 哈希函数(Hash Functions - 散列函数)的基本介绍(SHA-2,SHA-256,MD-5,Scrypt,BCrypt等)
- 网站主机 技术+类型
- 一个Linux驱动:Simple - REALLY simple memory mapping demonstration.
- POSIX:可移植操作系统接口(Portable Operating System Interface of UNIX,缩写为 POSIX )