js实现表单验证 常用JS表单验证
CSS代码 @charset "gb2312";
/* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #header,#main{
width:650px;
margin: auto;
}
.bg{
background-image:url(../images/register_bg.gif);
background-repeat:no-repeat;
width:6px;
height:6px;
}
.bg_top_left{
background-position:0px 0px;
}
.bg_top_right{
background-position:0px -6px;
}
.bg_end_left{
background-position:0px -12px;
}
.bg_end_right{
background-position:0px -18px;
}
.bg_top{
border-top:solid 1px #;
}
.bg_end{
border-bottom:solid 1px #;
}
.bg_left{
border-left:solid 1px #;
}
.bg_right{
border-right:solid 1px #;
} .content{
padding:10px;
}
.inputs{
border:solid 1px #a4c8e0;
width:150px;
height:15px;
} .userWidth{
width:110px;
}
.content div{
float:left;
font-size:12px;
color:#;
}
dl{
clear:both;
}
dt,dd{
float:left;
}
dt{
width:130px;
text-align:right;
font-size:14px;
height:30px;
line-height:25px;
}
dd{
font-size:12px;
color:#;
width:180px;
}
/*当鼠标放到文本框时，提示文本的样式*/
.import_prompt{
border:solid 1px #ffcd00;
background-color:#ffffda;
padding-left:5px;
padding-right:5px;
line-height:20px;
}
/*当文本框内容不符合要求时，提示文本的样式*/
.error_prompt{
border:solid 1px #ff3300;
background-color:#fff2e5;
background-image:url(../images/li_err.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
/*当文本框内容输入正确时，提示文本的样式*/
.ok_prompt{
border:solid 1px #01be00;
background-color:#e6fee4;
background-image:url(../images/li_ok.gif);
background-repeat:no-repeat;
background-position:5px 2px;
padding:2px 5px 0px 25px;
line-height:20px;
}
// JavaScript Document /*通过ID获取HTML对象的通用方法，使用$代替函数名称*/
function $(elementId){
return document.getElementById(elementId);
} /*当鼠标放在通行证用户名文本框时，提示文本及样式*/
function userNameFocus(){
var userNameId=$("userNameId");
userNameId.className="import_prompt";
userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
} /*当鼠标离开通行证用户名文本框时，提示文本及样式*/
function userNameBlur(){
var userName=$("userName");
var userNameId=$("userNameId");
var reg=/^[-9a-zA-Z][-9a-zA-Z_.-]{,}[-9a-zA-Z]$/;
if(userName.value==""){
userNameId.className="error_prompt";
userNameId.innerHTML="通行证用户名不能为空，请输入通行证用户名";
return false;
}
if(reg.test(userName.value)==false){
userNameId.className="error_prompt";
userNameId.innerHTML="1、由字母、数字、下划线、点、减号组成<br/>2、只能以数字、字母开头或结尾，且长度为4-18";
return false;
}
userNameId.className="ok_prompt";
userNameId.innerHTML="通行证用户名输入正确";
return true;
} /*当鼠标放在密码文本框时，提示文本及样式*/
function pwdFocus(){
var pwdId=$("pwdId");
pwdId.className="import_prompt";
pwdId.innerHTML="密码长度为6-16";
} /*当鼠标离开密码文本框时，提示文本及样式*/
function pwdBlur(){
var pwd=$("pwd");
var pwdId=$("pwdId");
if(pwd.value==""){
pwdId.className="error_prompt";
pwdId.innerHTML="密码不能为空，请输入密码";
return false;
}
if(pwd.value.length< || pwd.value.length>){
pwdId.className="error_prompt";
pwdId.innerHTML="密码长度为6-16";
return false;
}
pwdId.className="ok_prompt";
pwdId.innerHTML="密码输入正确";
return true;
} /*当鼠标离开重复密码文本框时，提示文本及样式*/
function repwdBlur(){
var repwd=$("repwd");
var pwd=$("pwd");
var repwdId=$("repwdId");
if(repwd.value==""){
repwdId.className="error_prompt";
repwdId.innerHTML="重复密码不能为空，请重复输入密码";
return false;
}
if(repwd.value!=pwd.value){
repwdId.className="error_prompt";
repwdId.innerHTML="两次输入的密码不一致，请重新输入";
return false;
}
repwdId.className="ok_prompt";
repwdId.innerHTML="两次密码输入正确";
return true;
} /*当鼠标放在昵称文本框时，提示文本及样式*/
function nickNameFocus(){
var nickNameId=$("nickNameId");
nickNameId.className="import_prompt";
nickNameId.innerHTML="1、包含汉字、字母、数字、下划线以及@!#$%&*特殊字符<br/>2、长度为4－20个字符<br/>3、一个汉字占两个字符";
} /*当鼠标离开昵称文本框时，提示文本及样式*/
function nickNameBlur(){
var nickName=$("nickName");
var nickNameId=$("nickNameId");
var k=;
var reg=/^([\u4e00-\u9fa5]|\w|[@!#$%&*])+$/; // 匹配昵称
var chinaReg=/[\u4e00-\u9fa5]/g; //匹配中文字符
if(nickName.value==""){
nickNameId.className="error_prompt";
nickNameId.innerHTML="昵称不能为空，请输入昵称";
return false;
}
if(reg.test(nickName.value)==false){
nickNameId.className="error_prompt";
nickNameId.innerHTML="只能由汉字、字母、数字、下划线以及@!#$%&*特殊字符组成";
return false;
} var len=nickName.value.replace(chinaReg,"ab").length; //把中文字符转换为两个字母，以计算字符长度
if(len<||len>){
nickNameId.className="error_prompt";
nickNameId.innerHTML="1、长度为4－20个字符<br/>2、一个汉字占两个字符";
return false;
} nickNameId.className="ok_prompt";
nickNameId.innerHTML="昵称输入正确";
return true;
} /*当鼠标放在关联手机号文本框时，提示文本及样式*/
function telFocus(){
var telId=$("telId");
telId.className="import_prompt";
telId.innerHTML="1、手机号码以13，15，18开头<br/>2、手机号码由11位数字组成";
} /*当鼠标离开关联手机号文本框时，提示文本及样式*/
function telBlur(){
var tel=$("tel");
var telId=$("telId");
var reg=/^(||)\d{}$/;
if(tel.value==""){
telId.className="error_prompt";
telId.innerHTML="关联手机号码不能为空，请输入关联手机号码";
return false;
}
if(reg.test(tel.value)==false){
telId.className="error_prompt";
telId.innerHTML="关联手机号码输入不正确，请重新输入";
return false;
}
telId.className="ok_prompt";
telId.innerHTML="关联手机号码输入正确";
return true;
} /*当鼠标放在保密邮箱文本框时，提示文本及样式*/
function emailFocus(){
var emailId=$("emailId");
emailId.className="import_prompt";
emailId.innerHTML="请输入您常用的电子邮箱";
} /*当鼠标离开保密邮箱文本框时，提示文本及样式*/
function emailBlur(){
var email=$("email");
var emailId=$("emailId");
var reg=/^\w+@\w+(\.[a-zA-Z]{,}){,}$/;
if(email.value==""){
emailId.className="error_prompt";
emailId.innerHTML="保密邮箱不能为空，请输入保密邮箱";
return false;
}
if(reg.test(email.value)==false){
emailId.className="error_prompt";
emailId.innerHTML="保密邮箱格式不正确，请重新输入";
return false;
}
emailId.className="ok_prompt";
emailId.innerHTML="保密邮箱输入正确";
return true;
} /*表单提交时验证表单内容输入的有效性*/
function checkForm(){
var flagUserName=userNameBlur();
var flagPwd=pwdBlur();
var flagRepwd=repwdBlur();
var flagNickName=nickNameBlur();
var flagTel=telBlur();
var flagEmail=emailBlur(); userNameBlur();
pwdBlur();
repwdBlur();
nickNameBlur();
telBlur();
emailBlur(); if(flagUserName==true &&flagPwd==true &&flagRepwd==true &&flagNickName==true&&flagTel==true&flagEmail==true){
return true;
}
else{
return false;
} }
!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>
<link type="text/css" rel="stylesheet" href="css/register.css" />
<script type="text/javascript" src="js/register.js"></script>
</head> <body>
<div id="header"><img src="data:images/register_logo.gif" alt="logo"/></div>
<div id="main">
<table width="100%" border="" cellspacing="" cellpadding="">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform" onsubmit="return checkForm()">
<dl>
<dt>通行证用户名：</dt>
<dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @.com</dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登录密码：</dt>
<dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()"/></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重复登录密码：</dt>
<dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()"/></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性别：</dt>
<dd><input name="sex" type="radio" value="" checked="checked"/>男 <input name="sex" type="radio" value="" />女 </dd>
</dl>
<dl>
<dt>真实姓名：</dt>
<dd><input type="text" id="realName" class="inputs" onblur="aa()" /></dd>
</dl>
<dl>
<dt>昵称：</dt>
<dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()"/></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>关联手机号：</dt>
<dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()" /></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密邮箱：</dt>
<dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="image" src="data:images/button.gif"/></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table> </div>
</body>
<script type="text/javascript">
function aa(){ var reg = /^[\u4e00-\u9fa5]$/;
var name = document.getElementById("realName").value; if(reg.test(name)==false){
alert("只能为汉字");
}else{
alert("正确");
} }
</script> </html>
/*
输入：str
返回：
如果全是空返回true,否则返回false
*/
function isNull(str) {
if (str == "") return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
} /*
检查输入字符串是否只由英文字母和数字和下划线组成
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isNumberOr_Letter(s) {//判断是否是数字或字母
var regu = "^[0-9a-zA-Z\_]+$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
} /*
检查输入对象的值是否符合E-Mail格式
输入：str 输入的字符串
返回：如果通过验证返回true,否则返回false
*/
function isEmail(str) {
var myReg = /^[-_A-Za-z0-]+@([_A-Za-z0-]+\.)+[A-Za-z0-]{,}$/;
if (myReg.test(str)) return true;
return false;
} /*
检查输入手机号码是否正确
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function checkMobile(s) {
var regu = /^[][-][-]{}$/;
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
} /*
检查输入字符串是否是数字
输入：
str：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isNumber(str)
{
var reg = /^\d+$/;
if (reg.test(str))
return true;
else
return false;
} /*
检查输入字符串是否符合正整数格式
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isNumber(s) {
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != -) {
return true;
} else {
return false;
}
} /* 检查输入字符串是否符合国内固话或者传真格式 输入： s：字符串 格式例如：020-87110252 返回： 如果通过验证返回true,否则返回false */ function isTel(s){ var reg=/^((\d{,})-)?(\d{,})(-(\d{,}))?$/; if(!reg.test(s)) return false ； return true ｝ /*检查输入字符串是否符合身份证格式 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function isIDno(strIDno) { var aCity={:"北京",:"天津",:"河北",:"山西",:"内蒙古",:"辽宁",:"吉林",:"黑龙江",:"上海",:"江苏",:"浙江",:"安徽",:"福建",:"江西",:"山东",:"河南",:"湖北",:"湖南",:"广东",:"广西",:"海南",:"重庆",:"四川",:"贵州",:"云南",:"西藏",:"陕西",:"甘肃",:"青海",:"宁夏",:"新疆",:"台湾",:"香港",:"澳门",:"国外"}; var iSum = ; var info = ""; //var strIDno = obj.value; var idCardLength = strIDno.length; if(!/^\d{}(\d|x)$/i.test(strIDno)&&!/^\d{}$/i.test(strIDno)) { //alert("非法身份证号"); return false; } //在后面的运算中x相当于数字10,所以转换成a strIDno = strIDno.replace(/x$/i,"a"); if(aCity[parseInt(strIDno.substr(,))]==null) { //alert("非法地区"); return false; } if (idCardLength==) { sBirthday=strIDno.substr(,)+"-"+Number(strIDno.substr(,))+"-"+Number(strIDno.substr(,)); var d = new Date(sBirthday.replace(/-/g,"/")) if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+) + "-" + d.getDate())) { //alert("非法生日"); return false; } for(var i = ;i>=;i --) iSum += (Math.pow(,i) % ) * parseInt(strIDno.charAt( - i),); if(iSum%!=) { //alert("非法身份证号"); return false; } } else if (idCardLength==) { sBirthday = "" + strIDno.substr(,) + "-" + Number(strIDno.substr(,)) + "-" + Number(strIDno.substr(,)); var d = new Date(sBirthday.replace(/-/g,"/")) var dd = d.getFullYear().toString() + "-" + (d.getMonth()+) + "-" + d.getDate(); if(sBirthday != dd) { //alert("非法生日"); return false; } } return true; } /*
校验ip地址的格式
输入：strIP：ip地址
返回：如果通过验证返回true,否则返回false；
*/
function isIP(strIP) {
if (isNull(strIP)) return false;
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式
if (re.test(strIP)) {
if (RegExp.$ < && RegExp.$ < && RegExp.$ < && RegExp.$ < ) return true;
}
return false;
} /* 检查开始日期是否小于等于结束日期 输入： s：字符串 开始日期 格式：2014-3-23 e：字符串 结束日期 格式：2014-3-25 返回： 如果通过开始日期小于等于结束日期返回true,否则返回false */ function data_compare(s,e) { var arr=s.split("-"); var starttime=new Date(arr[],arr[],arr[]); var starttimes=starttime.getTime(); var arrs=e.split("-"); var endtime=new Date(arrs[],arrs[],arrs[]); var endtimes=endtime.getTime(); if(starttimes>=endtimes) { //alert('开始时间大于离开时间，请检查'); return false; } else return true; } /* 检查输入字符串是否只由汉字组成 输入： s：字符串 返回： 如果通过验证返回true,否则返回false */ function isZh(str){ var reg = /^[\u4e00-\u9fa5]+$/; if (reg.test(str)) return true; return false; } /*
检查输入字符串是否符合金额格式
格式定义为带小数的正数，小数点后最多三位
输入：
s：字符串
返回：
如果通过验证返回true,否则返回false
*/
function isMoney(s) {
var regu = "^[0-9]+[\.][0-9]{0,3}$";
var re = new RegExp(regu);
if (re.test(s)) {
return true;
} else {
return false;
}
} /*
用途：检查输入对象的值是否符合端口号格式
输入：str 输入的字符串
返回：如果通过验证返回true,否则返回false
*/
function isPort(str) {
return (isNumber(str) && str < );
} /*
用途：字符1是包含字符串2
输入：str1：字符串；str2：被包含的字符串
返回：如果通过验证返回true,否则返回false
*/
function isMatch(str1, str2) {
var index = str1.indexOf(str2);
if (index == -) return false;
return true;
}
js实现表单验证 常用JS表单验证的更多相关文章
- 表单：!!!常用JS： form 表单代码
手机(文本框): <input type="text" name="" maxlength="11" placeholder=&quo ...
- js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...
- js常用正则表达式表单验证代码
方法一: var re=/正则表达式/; re.test($("txtid").val()) 方法二: $("txtid").val.match(/正则 ...
- ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- 自制“低奢内”CSS3注册表单，包含JS验证哦。请别嫌弃,好吗？。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- ajax和servlet交互，表单日历插件，表单验证，form.js
我的index.jsp <body> <a>点我获取数据</a> <table border=1px> <tr> <td>ID& ...
- Js表单验证控件-02 Ajax验证
在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- Form表单提交，js验证
Form表单提交,js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button ...
随机推荐
- eclipse的tomcat内在溢出
在最前或最后加上: -Xms256m -Xmx512m -Xss2024K -XX:PermSize=128m -XX:MaxPermSize=256m
- About SQLite
About SQLite See Also... Features When to use SQLite Frequently Asked Questions Well-known Users Boo ...
- PCB的过孔
在走多层板时,经常需要打过孔,那么过孔是怎么分类的呢?且往下看. (1)通孔:这种孔穿过整个线路板,可以用于内部互连或者作为元件的安装定位孔(用于连接层:生成钻孔文件,在PCB上打孔并在孔内电镀:通常 ...
- mouseover事件与mouseenter事件的区别
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.对应mouseout 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件.对应mouseleave 被触发的 M ...
- Java中避免表单重复提交
表单的重复提交: 没有完整的进行一次,先请求表单页面->再提交表单过程而完成数据提交 造成的根本原因: 没有完整的进行一次,先请求表单页面->再提交表单过程. 造成重复提交的现象: 由于服 ...
- SQL Server 连接字符串备忘
今天把服务器上的远程访问关了,把连接字符串中的IP地址改成了.,然后就一直连不上.弄了半天,原来是本地连接时非默认实例,不能带端口号. 1.原来的连接服务器地址是:192.168.0.1SQL2005 ...
- 通过 SMB 直通优化文件服务器的性能
https://technet.microsoft.com/zh-cn/library/hh831487.aspx Windows Server 2012 内置新增功能,称为 SMB 直通,用来支持使 ...
- C++中vector的remove用法
我将从remove的复习开始这个条款,因为remove是STL中最糊涂的算法.误解remove很容易,驱散所有关于remove行为的疑虑——为什么它这么做,它是怎么做的——是很重要的. 这是rem ...
- jQuery EasyUI：根据数据库内容生成适合于easyui-tree的JSON数据格式
1,jQuery EasyUI中easyui-tree特定的JSON数据格式 [ {"id":1,"text":"某公司","ch ...
- 实现Cookie跨域共享
实现原理:cookie是不能跨域访问的,但是在二级域名是可以共享cookie的 概念说明:站点1=a.abc.com 站点2=b.abc.com 实现步骤:1. 配置两个站点的webconfig ...