标签:

注册界面

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练习)相关推荐

  1. php判断表单修改内容,JavaScript判断用户是否对表单进行了修改的方法_javascript技巧...

    本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用 ...

  2. php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码

    项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...

  3. php九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码_javascript技巧...

    项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...

  4. 验证(Javascript和正则表达式)

    昨天写了验证(C#和正则表达式),今天又写了个js版的验证.现在贴出来,为了方便自己查阅,同时也希望能给需要的人帮助和一些启发.由于今天才开始接触js,所以可能会有一些错漏,希望大家能批评指正. va ...

  5. html表单验证用正则表达式,JavaScript 使用正则表达式进行表单验证的示例代码

    搜索热词 JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 function regIsDigit(fData) { var reg = new RegExp(& ...

  6. 九九乘法表居中c语言,JavaScript实现九九乘法表的简单实例

    每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 J ...

  7. node js 写按键精灵_带有按键的Node.js Raw模式

    node js 写按键精灵 I find the stuff that people are doing with Node.js incredibly interesting.  You here ...

  8. html正则表达式确认密码,如何使用正则表达式在流星中验证确认密码

    我使用meteor开发我的应用程序.我需要验证我的注册表单,以便限制用户.现在,我在我的注册表单中输入密码并确认密码.我正在使用正则表达式进行验证.如何使用正则表达式在流星中验证确认密码 我的代码是: ...

  9. Atitit.js模块化 atiImport 的新特性javascript import

    Atitit.js模块化 atiImport 的新特性javascript import 1. 常见的js import规范amd ,cmd ,umd1 1.1. Require更多流行3 2. at ...

最新文章

  1. gitLab创建自己的私有库
  2. 推荐算法炼丹笔记:标签工程
  3. C++等级考试知识点总结
  4. html 最小长度单位,html见长度单位尺寸单�?CSS布局HTML
  5. python内点法_python射线法判断一个点在图形区域内外
  6. 【论文笔记】基于LSTM的问答对排序
  7. android获取组件id,Android 获取控件id的三种方式
  8. Win Server 2012 R2 安装SQL 2016先决条件
  9. NC文件数据提取完成(1.16)
  10. 几何实体图形保存成stl格式的ascII和二进制文。用Vc++语言读入文件,给三角网格坐标值乘以2,并保存到另一stl文件。输出完成工作所用的执行时间
  11. win10中修改mac地址
  12. Canny边缘检测非极大值抑制法在双立方插值(Bicubic)图像边缘优化
  13. H5 在iPhone真机上调试H5页面
  14. 手机通讯录分组名称_个人通讯录如何批量导入/导出
  15. linux中 . .bash_profile是什么意思
  16. 贷款用户逾期问题Task1
  17. 京东疯狂月薪36k程序员最新Java面试题(常见面试题及答案汇总)
  18. 【苹果家庭iMessage推送】Aupperpushslcertificate或ProductPushsCertificate证书不可以过期
  19. F1意大利站,阿隆索在法拉利的主场夺冠
  20. 【java】斐波那契数列

热门文章

  1. wits数据格式_WITS标准
  2. 网易云音乐刷听歌量_网易云音乐极速版悄然上线!听歌体验同之前没有差别
  3. mysql exists依赖查询_MySQL EXISTS 和 NOT EXISTS 子查询
  4. 牛客网编程题06--取近似值
  5. [译转] eBPF 概念和基本原理
  6. 如何证明CPU的乱序执行(Out-of-order Execution)?
  7. 哈希函数(Hash Functions - 散列函数)的基本介绍(SHA-2,SHA-256,MD-5,Scrypt,BCrypt等)
  8. 网站主机 技术+类型
  9. 一个Linux驱动:Simple - REALLY simple memory mapping demonstration.
  10. POSIX:可移植操作系统接口(Portable Operating System Interface of UNIX,缩写为 POSIX )