使用javascript及正则表达式实现表单验证(CSS,js练习)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>注册界面</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div class="zc">
<div>
<p class="top">用户注册</p>
</div>
<div class="main">
<form action="" method="get" onSubmit="return checkForm()">
账 &nbsp; &nbsp; &nbsp; 号:<input type="text" id="userId" name="userId" value="" />
<div id="point1" style="display:inline; color:#0CF;"></div><br />
密 &nbsp; &nbsp; &nbsp; 码:<input type="password" id="userPw" name="userPw" value="" />
<div id="point2" style="display:inline; color:#0CF;"></div><br />
确认密码:<input type="password" id="userPw1" name="userPw1" value="" />
<div id="point3" style="display:inline; color:#0CF;"></div><br />
姓 &nbsp; &nbsp; &nbsp; 名:<input type="test" id="name" name="name" value="" />
<div id="point4" style="display:inline; color:#0CF;"></div><br />
性 &nbsp; &nbsp; &nbsp; 别:<input type="radio" name="sex" value="" checked="checked" /> 男
<input type="radio" name="sex" value="" /> 女<br />
年 &nbsp; &nbsp; &nbsp; 龄:<input type="test" id="age" name="age" value="" />
<div id="point5" style="display:inline; color:#0CF;"></div><br />
电子邮件:<input type="test" id="email" name="email" value="" />
<div id="point6" style="display:inline; color:#0CF;"></div><br />
固定电话:<input type="test" id="tel" name="tel" value="" />
<div id="point7" style="display:inline; color:#0CF;"></div><br />
手机号码:<input type="test" id="phone" name="phone" value="" />
<div id="point8" style="display:inline; color:#0CF;"></div><br />
<input type="submit" value="注 册" style="color:#F08080;width:150px;height:50px;font-size:30px;position:relative;top:10px;left:100px;" />
</form>
</div>
</div>
<script language="javascript">
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;
}

</script>
</body>
</html>

时间: 2024-11-05 14:52:44

使用javascript及正则表达式实现表单验证(CSS,js练习)的相关文章

Java学习总计(二十六)——JavaScript正则表达式,Js表单验证,原生js+css页面时钟

一.JavaScript正则表达式1.exec检索字符串中指定的值,返回找到的值,并确定其位置2.test检索字符串中指定的值,返回true或false3.正则表达式对象的创建:(1)方式一:Var rgex=new RegExp("[0-9]","模式");(2)方式二:简便写法,用双斜杠//把正则表达式的内容括起来例1(正则创建,使用test()方法): <!DOCTYPE html> <html> <head> <me

JavaScript:综合案例-表单验证

综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须是4位数字,按照正则进行验证: .雇员姓名:不能为空: .雇员职位:不能为空: .雇员日期:按照"yyyy-mm-dd"的格式编写,按照正则进行验证: .基本工资:按照小数编写,小数为最多2位,按照正则进行验证: .佣金:难找小数编写,小数位数最多2位,按照正则进行验证. 具体步骤: 第一

表单验证的js

表单验证的两种方法: 一.onsubmit验证: <script language="javascript">     function CheckPost () {              if (addForm.user.value == "") {                      alert("请填写用户名!");                          addForm.username.focus();

吴裕雄--天生自然 JAVASCRIPT开发学习: 表单验证

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <head> <script> function validateForm(){ var x=document.forms["myForm"]["fname"

javascript:正则表达式、一个表单验证的例子

阅读目录 本文内容: 正则表达式: 利用正则表达式进行表单验证的例子: 回到顶部 本文内容: 正则表达式 正则表达式的使用方法 正则表达式的特殊匹配字符 正则表达式修饰符 利用正则表达式进行表单验证的例子 首发日期:2018-05-13 回到顶部 正则表达式: 正则表达式的使用方法: 首先创建正则表达式对象: [正则表达式的字符规则:如果是没有特殊意义的字符,直接写:如果是有特殊意义的,直接写:如果想将特殊意义的字符转成非特殊意义的,前面使用\] 可以通过RegExp对象创建正则表达式对象: v

js 常用正则表达式表单验证代码

js 常用正则表达式表单验证代码 js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中

layui修改表单验证规则

使用layui的表单验证form.js,一旦添加验证,例如 lay-verify="phone".lay-verify="email" 就会要求必填,然而很多时候我的要求是可以不填,但是填写就需要按照规则来填写,因此原生的form.js提供的验证方法已不能满足要求,我们需要实现这样的功能就需要自己实现,我们只需要修改layui下面的form.js在对应的正则表达式"/"后面加上'(^$)|'即可,如: verify: { required: [/

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的