用正则表达式和
javascript
对表单进行全面验证
网页教学网
使用时请将下面的
javascript
代码存到一个单一的
、表单要求
&formname="formname"onSubmit="returnvalidateForm(this)"&&/form&
将对表单中的所有以下类型的域依次验证，所有验证是去除了前导和后缀空格的，要注意是区分大小写的。
、空值验证
表单中任意域加上
属性将对此域是否为空进行验证（可以和最大长度验证
一般验证方式同时使用）。
无此属性视为此域允许空值。
&inputtype="text"name="fieldNamename"emptyInfo="
字段不能为空！
、最大长度验证（可以和空值验证、一般验证方式同时使用）：
&inputtype="text"name="fieldNamename"maxlength="20"lengthInfo="
最大长度不能超过
,&textareamaxlength="2000"lengthInfo="
最大长度不能超过
、一般验证方式
不对空值做验证）
&inputtype="text"validator="^(19|20)[0-9]{2}$"errorInfo="
不正确的年份
、标准验证
不与其它验证方式同时使用）：
&inputtype="hidden"&
来实现，并且不需要
属性以免提交到服务器。
、合法日期验证：
&inputtype="text"name="yearfieldName"value="2004"&
注：这里也可以是
&selectname
="yearfieldName"&&/select&
&inputtype="text"name="monthfieldName"value="02"&
&inputtype="text"name="dayfieldName"value="03"&
&inputtype="hidden"validatorType="DateGroup"year="yearfieldName"month="monthfieldName"
day="dayfieldName"errorInfo="
不正确的日期
yearfieldName
monthfieldName
dayfieldName
分别为年月日字段，月和日可以是两位
或一位格式
此处不对每个字段分别检验
如果要检验，请在年月日三个域分别使用前面的一般验证方式），只对日期的最大值是否合法检查
、日期格式验证
请注意，此验证不对日期是否有效进行验证，还未找到从格式中得到年月日数据的方法
&inputtype="text"name="datefieldName"value="1:31:00"&
&inputtype="hidden"validatorType="Date"fieldName="datefieldName";format="yyyy-MM-ddHH:mm:ss"
errorInfo="
不正确的日期
其中格式仅对
其它字符视为非时间的字符
、列表验证：
是否至少选中了一条记录
主要用于多项选择
&inputtype="checkbox"name="checkbox1"&
&inputtype="hidden"validatorType="Checkbox"fieldName="checkbox1"errorInfo="
请至少选中一条记录
validatorType
表单，如果要求选择一条不能是第一条的记录，请用下列方式
&selectname="select1"emptyInfo="
请选择一个选项
&optionvalue=""&==
==&/option&
&optionvalue="1"&1&/option&
&inputtype="text"name="email"&
&inputtype="hidden"fieldName="email"validatorType="Email"separator=","errorInfo="
为可选项，表示输入多个
时的分隔符
无此选项只能是一个地址）
、加入其它
javascript
&scripttype="text/javascript"&
functionfunctionname(){
自定义方法
表单中加入
&inputtype="hidden"validatorType="javascript"functionName="functionname"&
属性中指定的
javascript
方法（要求方法返回
将不再验证表单，也不提交表单
、在表单通过验证提交前
一个按钮（也可将其它域
不能与其它验证同在一个域
，不要求按钮是表单中的最后一个
&inputtype="button"name="
"validatorType="disable"&
、不验证表单
&inputtype="hidden"name="validate"value="0"functionName="functionname"&
时不对表单进行验证，直接提交表单或执行指定
后提交表单
functionName
&scripttype="text/javascript"&
functiongetStringLength(str){
varendvalue=0;
varsourcestr=newString(str);
相关资料推荐
数据常见问题解决
JavaScript经典效果集锦JavaScript经典效果集锦JavaScript经典效果集锦JavaScript经典效果集锦JavaScript经典效果集锦JavaScript经典效果集锦JavaScript经典效…
超经典jQuery应用技巧大全.doc
jQuery中文手册.chm
jquery表单验证大全.doc
十天学会DIV+CSS(WEB标准).chm
完整的数据库语法.sql
学习java少不了的
，JS金典案例，Ajax讲义，Jquery学习手册等
有关表单一些非空等等验证。
正则表达式和javascript对表单进行全面验证
ExceptionHandle validate JavaScript验证脚本
在此可输入您对该资料的评论~
资料阅读排行
(window.slotbydup=window.slotbydup || []).push({
id: '2371234',
container: s,
size: '300,250',
display: 'inlay-fix'
该用户的其它资料
请选择举报的类型
赌博犯罪类
资料评价：
所需积分：1JavaScript表单验证实例之验证表单项是否为空
作者：程序员小菜
字体：[ ] 类型：转载 时间：
表单验证几乎在每个需要注册或者是登录的网站都是必不可少，下面通过本篇文章给大家介绍JavaScript表单验证实例之验证表单项是否为空，涉及到js表单验证实例相关知识，对js表单验证实例代码需要的朋友一起学习吧
表单验证几乎在每一个需要注册或者登陆的网站是必不可少的，有些验证则非常的复杂，可以说是各种各样给你的要求，不过本章节只介绍一下表单中最简单的验证方式，就是判断是否为空，有些要求比较低的网站对此已经满足需要了。
&!DOCTYPE html&
&meta charset=" utf-8"&
&meta name="author" content="http://www.jb51.net/" /&
&title&js简单表单验证&/title&
&script type="text/javascript"&
window.onload=function()
var bt=document.getElementById("bt");
bt.onclick=function()
if(document.myform.name.value=="")
alert("用户名不能为空!");
document.myform.name.focus();
else if(document.myform.pw.value=="")
alert("密码不能为空!");
document.myform.pw.focus();
&form action="index.php" method="get" name="myform"&
&li&姓名:&input type="text" name="name" id="name" /&&/li&
&li&密码:&input type="text" name="pw" id="age" /&&/li&
&li&&input type="submit" id="bt"/&&/li&
以上代码，当点击提交按钮的时候，能够进行简单的表单验证，如果表单项为空，那么就会弹出提示，并且将焦点放入当前表单项，代码比较简单，这里距不多介绍了，可以参阅相关阅读。
下面在来看下js验证表单实例代码：
gspan.html
&title&表单验证实例&/title&
&meta http-equiv="Content-Type" content="text/ charset=utf-" /&
&script src="check.js" type="text/javascript"&&/script&
span{ font-size: }
.stats{ color : # }
.stats{ color : }
.stats{ color : }
.stats{ color : }
&form method="post" action="reg.php" onsubmit="return regs('click')" &
用户名：&input type="text" name="username" /&&span class="stats"&用户名不能为空&/span&&br/&
邮箱：&input type="text" name="email" /&&span class="stats"&邮箱不能为空&/span&&br/&
密码：&input type="password" name="password" /&&span class="stats"&密码不能为空&/span&&br/&
确认密码：&input type="password" name="chkpass" /&&span class="stats"&密码不能为空&/span&&br/&
&input type="submit" /&
function gspan(cobj){ //获取表单后的span 标签 显示提示信息
if (cobj.nextSibling.nodeName != 'SPAN'){
gspan(cobj.nextSibling);
return cobj.nextS
//检查表单 obj【表单对象】， info【提示信息】 fun【处理函数】 click 【是否需要单击， 提交时候需要触发】
function check(obj, info, fun, click){
var sp = gspan(obj);
obj.onfocus = function(){
sp.innerHTML =
sp.className = 'stats';
obj.onblur = function(){
if (fun(this.value)){
sp.innerHTML = "输入正确！";
sp.className = "stats";
sp.innerHTML =
sp.className = "stats";
if (click == 'click'){
obj.onblur();
onload = //页面载入完执行
function regs(click){
var stat = //返回状态， 提交数据时用到
username = document.getElementsByName('username')[];
password = document.getElementsByName('password')[];
chkpass = document.getElementsByName('chkpass')[];
email = document.getElementsByName('email')[];
check(username, "用户名的长度在-之间", function(val){
if (val.match(/^\S+$/) && val.length &= && val.length &=){
}, click);
check(password, "密码必须在-位之间", function(val){
if (val.match(/^\S+$/) && val.length &= && val.length &=){
}, click);
check(chkpass, "确定密码要和上面一致，规则也要相同", function(val){
if (val.match(/^\S+$/) && val.length &= && val.length &= && val == password.value){
}, click);
check(email, "请按邮箱规则输入", function(val){
if (val.match(/\w+@\w+\.\w/)){
}, click);
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js校验表单后提交表单的三种方法总结
字体：[ ] 类型：转载 时间：
本篇文章主要是对js校验表单后提交表单的三种方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
第一种： 代码如下:&script type="text/javascript"&&&&&&&&& function check(form) {&&&&&&&&& if(form.userId.value=='') {&&&&&&&&&&&&&&& alert("请输入用户帐号!");&&&&&&&&&&&&&&& form.userId.focus();&&&&&&&&&&&&&&&&&&&&&&&&& }&&&&&& if(form.password.value==''){&&&&&&&&&&&&&&& alert("请输入登录密码!");&&&&&&&&&&&&&&& form.password.focus();&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&&& }&/script&
&form action="login.do?act=login" method="post"&用户帐号& &input type=text name="userId" size="18" value="" &&br&&登录密码&&&&& &input type="password" name="password" size="19" value=""/&&&&&& &&input type=submit name="submit1" value="登陆" onclick="return check(this.form)"&&
&/form&&& & 第二种 代码如下:&script type="text/javascript"&&&&&&&&& function check(form) {&&&&&&&&& if(form.userId.value=='') {&&&&&&&&&&&&&&& alert("请输入用户帐号!");&&&&&&&&&&&&&&& form.userId.focus();&&&&&&&&&&&&&&&&&&&&&&&&& }&&&&&& if(form.password.value==''){&&&&&&&&&&&&&&& alert("请输入登录密码!");&&&&&&&&&&&&&&& form.password.focus();&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&&&&&&& }&/script&
&form action="login.do?act=login" method="post" onsubmit="return check(this)"&用户帐号& &input type=text name="userId" size="18" value="" &&br&&登录密码&&&&& &input type="password" name="password" size="19" value=""/&&&&&& &&input type=submit name="submit1" value="登陆"&&
第三种： 代码如下:&script type="text/javascript"&&&&&&&&& function check(form) {&&&&&&&&& if(form.userId.value=='') {&&&&&&&&&&&&&&& alert("请输入用户帐号!");&&&&&&&&&&&&&&& form.userId.focus();&&&&&&&&&&&&&&&&&&&&&&&&& }&&&&&& if(form.password.value==''){&&&&&&&&&&&&&&& alert("请输入登录密码!");&&&&&&&&&&&&&&& form.password.focus();&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&& document.myform.submit();}&/script&
&form action="login.do?act=login" name="myform" method="post"&用户帐号& &input type=text name="userId" size="18" value="" &&br&&登录密码&&&&& &input type="password" name="password" size="19" value=""/&&&&&& &input type=button name="submit1" value="登陆" onclick="check(this.form)"&&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js实现表单及时验证功能 用户信息立即验证
作者：jianzhonghao
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了js实现表单及时验证功能，在输入后就可以立即验证，含用户类型,性别,爱好等验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
问题：表单怎么在输入后立即验证，而不是提交后再验证那么不方便（网上搜到的要么是模棱两可，要么是残缺不全…）
方法：鉴于此，小可，水山奇，将其代码补全，加上小可我个人的理解（注释）在上面，仅供后来者少走弯路，也请各路好汉批评指正…（转发请注作者,xiexie）————table表格版，以后会继续有JQuery版…
如果帮助到您，顶一下 ヾ(≧O≦)〃嗷~
&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&用户注册&/title&
&!-- 此处引用外部css样式 --&
&link rel="stylesheet" href="css/style.css" /&
&script type="text/javascript"&
//及时验证用户名
function checkuse(){
//在每个函数中定义check变量是为了在表单提交后，能够逐个验证每个函数是否通过，很好很好。（以下同理）
var username = document.getElementById("username").
if (username.length & 18 || username.length & 6) {
alert("用户名输入不合法，请重新输入！");
//此处甚妙，既然你在此处输入错误，那么按理说当然要在此处继续输入了。（在此处继续获取焦点！）
document.getElementById("username").focus();
document.getElementById("checktext1").innerHTML = "* 用户名由6-18位字符组成 √";
//利用正则表达式判断密码符合否
function checkpwd() {
var reg = /[^A-Za-z0-9_]+/;
var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
var password = document.getElementById("password").
if (password.length & 6 || password.length & 18 || regs.test(password)) {
alert("密码输入不合法，请重新输入！");
document.getElementById("password").focus();
document.getElementById("checktext2").innerHTML = "* 密码由6-18位字符组成，且必须包含字母、数字和标点符号 √";
//验证密码是否不一致！
function checkpwdc() {
var password = document.getElementById("password").
var pwdc = document.getElementById("pwdc").
if (password != pwdc) {
alert("两次输入密码不一致，请重新输入！");
document.getElementById("pwdc").focus();
document.getElementById("checktext3").innerHTML = "* 请再次输入你的密码 √";
//提交时验证用户类别
function checkut(){
if(document.getElementById("selUser").selectedIndex == 0)
alert("请选择用户类型！");
document.getElementById("selUser").focus();
document.getElementById("checktext4").innerHTML = "* 请选择用户类型 √";
//提交时验证用户性别
function checkGender(){
var gender = "";
//获取所有名称为sex的标签
var sex = document.getElementsByName("sex");
//遍历这些名称为sex的标签
for(var i=0;i&sex.++i){
//如果某个sex被选中，则记录
if(sex[i].checked)
gender = sex[i].
if(gender == "")
alert("请选择性别！");
document.getElementById("checktext5").innerHTML = "* 请选择你的性别 √";
//及时验证出生日期
function checkDate(){
if(document.getElementById("txtDate").value ==""){
alert("请填写出生日期！");
document.getElementById("txtDate").focus();
document.getElementById("checktext6").innerHTML = "* 请选择你的出生日期 √";
//及时验证兴趣爱好
function checkHobby(){
var hobby = 0;
//objNum为所有名称为hobby的input标签
var objNum = document.getElementsByName("hobby");
//遍历所有hobby标签
for(var i=0;i&objNum.++i){
//判断某个hobby标签是否被选中
if(objNum[i].checked==true)
//如果有选中的hobby标签
if(hobby &=1){
document.getElementById("checktext7").innerHTML = "* 请选择你的兴趣爱好 √";
alert("请填写爱好！");
//正则表达式验证电子邮件（及时）
function checkemail(){
//电子邮件的正则表达式
var e1 = document.getElementById("email").value.indexOf("@",0);
var e2 = document.getElementById("email").value.indexOf(".",0);
if(email == "" || (e1==-1 || e2==-1) || e2&e1 )
alert("E_mail输入错误!");
document.getElementById("email").focus();
document.getElementById("checktext8").innerHTML = "* 请填写常用的EMAIL，将用于密码找回 √";
//及时验证自我介绍
function checkintro(){
var intro = document.getElementById("introduction").
if (intro.length & 100) {
alert("字数超限！");
document.getElementById("checktext9").innerHTML = "* 限100字内 √";
document.getElementById("checktext9").focus();
//提交表单时所有都验证一遍(若任何一个验证不通过，则返回为false，阻止表单提交)
function check() {
var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
&& checkemail() &&checkintro();
&!-- &form action ="跳转页面" method ="get"|"post" name ="表单名称" target ="打开方式" enctype="multipart/form-data" & --&
&!-- onsubmit()函数在返回值为true时提交表单。 --&
&form action="#" method="get" onsubmit="return check()" &
&fieldset&
表单及时验证小例子
&table align="left" style="background-image: url('img/4.jpg');" &
&td&用户名:&/td&
&td&&input type="text" name="username" id="username" onchange=" checkuse()" /&&/td&
&td id="checktext1"&* 用户名由6-18位字符组成&/td&
&!-- onblur 事件处理程序:当元素或窗口失去焦点时触发该事件 --&
&!-- onchange事件处理程序:当表单元素获取焦点，并且内容发生改变时，触发该事件 --&
&!-- 以下同理 --&
&td&密码:&/td&
&td&&input type="password" name="password" id="password" onchange="checkpwd()" /&&/td&
&td id="checktext2"&* 密码由6-18位字符组成，且必须包含字母、数字和标点符号&/td&
&td&确认密码：&/td&
&td&&input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /&&/td&
&td id="checktext3"&* 请再次输入你的密码&/td&
&td&用户类型：&/td&
&select id="selUser" onblur="checkut()"&
&option name="selUser" value="0"&请选择&/option&
&option name="selUser" value="1"&管理员&/option&
&option name="selUser" value="2"&普通用户&/option&
&td id="checktext4"&* 请选择用户类型&/td&
&td&性别：&/td&
&input type="radio" value="1" name="sex" onchange="checkGender()"/&男
&input type="radio" value="2" name="sex" onchange="checkGender()"/&女
&td id="checktext5"&* 请选择你的性别&/td&
&td&出生日期：&/td&
&td&&input type="date" name="date" id="txtDate" onblur="checkDate()"/&&/td&
&td id="checktext6"&* 请选择你的出生日期&/td&
&td&兴趣爱好：&/td&
&input type="checkbox" name="hobby" value="reading" onchange="checkHobby()"&阅读
&input type="checkbox" name="hobby" value="music" onchange="checkHobby()"&音乐
&input type="checkbox" name="hobby" value="sports" onchange="checkHobby()"&运动
&td id="checktext7"&* 请选择你的兴趣爱好&/td&
&td&电子邮件：&/td&
&td&&input type="text" name="email" id="email" onchange="checkemail()"/&&/td&
&td id="checktext8"&* 请填写常用的EMAIL，将用于密码找回&/td&
&td&自我介绍：&/td&
&td&&textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()"&这是自我介绍...&/textarea&&/td&
&td id="checktext9"&* 限100字内&/td&
&td colspan="2" align="center"&
&input type="submit" name="submit" value="提交" /&
&input type="reset" name="reset" value="重置" /&
&/fieldset&
input:focus,textarea:focus{
border:1px solid #f00;
background:#
font-size:15
/* 字体的样式 */
font-family:Microsoft YaH
select option{
font-size:10
font-family:Microsoft YaH
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具1个回答1个回答1个回答4个回答2个回答2个回答2个回答2个回答5个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答1个回答
相关文章：
最新添加资讯
24小时热门资讯
Copyright ©
All Rights Reserved. 学网 版权所有
京ICP备号-1 京公网安备02号