JavaScript表单即时验证 验证不成功不能提交

不能再让表单在提交按钮之后才被验证了！你输入的任何信息表单都会即时反应！
这个JavaScript的关键是onChange()事件，使用onKeyUp()事件完成是不行的，人家没有输入完毕，你就说人家不对，多不友好啊╮(╯▽╰)╭

一、基本目标

一个表单认证页，如果输入的用户名超过10位则会立即在输入框旁边弹出提示：

如果密码少于6位，而且两次输入密码不一致同样弹出提示，

如果你没有勾选阅读条款的复选框，同样会弹出提示

知道你所有的项目满足设定的条件之前，提交按钮无效。

满足设定条件，表单通过get的方法提交。

二、制作过程

整个页面的代码如下：

<!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=utf-8" />
  <title>formcheck</title>
  <script type="text/javascript">
function checkusrn() {
 var check = false;
 var username = document.getElementById("username").value;
 if (username.length > 10) {
  document.getElementById("checktext1").innerHTML = " × 不要多于10位";
  check = false;
 } else {
  document.getElementById("checktext1").innerHTML = " √";
  check = true;
 }
 return check;
} 

function checkpwd() {
 var check = false;
 var password = document.getElementById("password").value;
 if (password.length < 6) {
  document.getElementById("checktext2").innerHTML = " × 不要少于6位";
  check = false;
 } else {
  document.getElementById("checktext2").innerHTML = " √";
  check = true;
 }
 return check;
}
function checkpwdc() {
 var check = false;
 var password = document.getElementById("password").value;
 var pwdc = document.getElementById("pwdc").value;
 if (password != pwdc) {
  document.getElementById("checktext3").innerHTML = " × 两次输入密码不一致";
  check = false;
 } else {
  document.getElementById("checktext3").innerHTML = " √";
  check = true;
 }
 return check;
}
function checkcb() {
 var check = false 

 if (!document.getElementsByName("checkbox")[0].checked) {
  document.getElementById("checktext4").innerHTML = " × 请同意我们的条款才可以继续申请";
  check = false;
 } else {
  document.getElementById("checktext4").innerHTML = "";
  check = true; 

 }
 return check; 

}
function check() {
 var check = checkusrn() && checkpwd() && checkpwdc() && checkcb();
 return check; 

}
</script>
 </head> 

 <body>
  <form action="success.html" method="get" onsubmit="return check()">
   <fieldset>
    <legend>
     表单验证小例子
    </legend>
    <h3>
     请输入信息
    </h3>
    <label>
     用户名：
    </label>
    <input type="text" id="username" name="username"
     onchange="checkusrn()" />
    <span id="checktext1"></span>
    <br />
    <label>
     密码：
    </label>
    <input type="password" id="password" name="password"
     onchange="checkpwd()" />
    <span id="checktext2"></span>
    <br />
    <label>
     确认密码：
    </label>
    <input type="password" id="pwdc" name="pwdc" onchange="checkpwdc()" />
    <span id="checktext3"></span>
    <br />
    <input type="checkbox" name="checkbox" onchange="checkcb()" />
    <label>
     我已经阅读了XX条款并不能同意得更多
    </label>
    <span id="checktext4"></span>
    <br />
    <br />
    <input type="submit" value="走！" />
   </fieldset>
  </form>
 </body>
</html>

下面一个一个函数进行说明：

1.先完成html页面的表单部分，也就是整个页面主体<body>部分

<form action="success.html" method="get" onsubmit="return check()">
 <fieldset>
  <legend>
   表单验证小例子
  </legend>
  <h3>
   请输入信息
  </h3>
  <label>
   用户名：
  </label>
  <input type="text" id="username" name="username"
   onchange="checkusrn()" />
  <span id="checktext1"></span>
  <br />
  <label>
   密码：
  </label>
  <input type="password" id="password" name="password"
   onchange="checkpwd()" />
  <span id="checktext2"></span>
  <br />
  <label>
   确认密码：
  </label>
  <input type="password" id="pwdc" name="pwdc" onchange="checkpwdc()" />
  <span id="checktext3"></span>
  <br />
  <input type="checkbox" name="checkbox" onchange="checkcb()" />
  <label>
   我已经阅读了XX条款并不能同意得更多
  </label>
  <span id="checktext4"></span>
  <br />
    <br />
  <input type="submit" value="走！" />
 </fieldset>
</form>

每一个表单的都分别设置了id与name，id是给上面的js函数getelementbyid使用的，name是给action的get方法使用。
onchange()是当用户输入完毕，元素改变之后才js的函数调用，onkeyup是完成一个字母输入就进行js函数调用，那当然选择前者。

总表单的提交是首先要通过onsubmit()方法的判断，如果这个onsubmit()的真值不为真，就不让提交，一般这个值默认为真，表单是无条件就条件，所以我们要让其返回check()所返回的值，看看此表单是否被允许调教

2.JS函数，也就是<head>头的<script type="text/javascript">部分

(1)checkusrn() ,checkpwd(),checkpwdc()

function checkusrn() {
 var check = false;
 var username = document.getElementById("username").value;
 if (username.length > 10) {
  document.getElementById("checktext1").innerHTML = " × 不要多于10位";
  check = false;
 } else {
  document.getElementById("checktext1").innerHTML = " √";
  check = true;
 }
 return check;
} 

function checkpwd() {
 var check = false;
 var password = document.getElementById("password").value;
 if (password.length < 6) {
  document.getElementById("checktext2").innerHTML = " × 不要少于6位";
  check = false;
 } else {
  document.getElementById("checktext2").innerHTML = " √";
  check = true;
 }
 return check;
}
function checkpwdc() {
 var check = false;
 var password = document.getElementById("password").value;
 var pwdc = document.getElementById("pwdc").value;
 if (password != pwdc) {
  document.getElementById("checktext3").innerHTML = " × 两次输入密码不一致";
  check = false;
 } else {
  document.getElementById("checktext3").innerHTML = " √";
  check = true;
 }
 return check;
}

三部分逻辑完全一样，先立个判断flag，check，看是否认证通过，为下面的总判断函数做准备。 之所分开三个函数写，并立起不同的flag（请注意每个check值只作用于每个函数内，互不影响），传到总的check函数。是保证不会出现类似还没输入密码框就说密码输入少于6位的情况。

同时，拿值，立即改变输入框旁边的行内文本<span>。

值得注意的是checkpwdc()要同时拿走上面的密码框的输入值，否则无法完成这次判断。

(2)checkcb()

function checkcb() {
 var check = false 

 if (!document.getElementsByName("checkbox")[0].checked) {
  document.getElementById("checktext4").innerHTML = " × 请同意我们的条款才可以继续申请";
  check = false;
 } else {
  document.getElementById("checktext4").innerHTML = "";
  check = true; 

 }
 return check; 

}

请注意复选框的判断与文本框、密码框的判断是不同的，要用getelementbyname（）去拿name而不能如同上面的方法那样拿ID

(3)总判断函数check()

function check() {
 var check = checkusrn() && checkpwd() && checkpwdc() && checkcb();
 return check;
}

意思是上述所有函数必须判断通过，此函数的返回值才是真，此乃合取式，一个为假，此式就为假。
把这个check打到总表单的onsubmit()事件的返回值中，控制表单是否能够提交，接触action指向的页面。

至此，制作完毕。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • javascript制作的简单注册模块表单验证

    javascript制作的简单注册模块表单验证

    一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • JavaScript 使用正则表达式进行表单验证的示例代码

    JavaScript 表单验证正则表达式大全利用正则表达式判断是否是0-9的阿拉伯数字 复制代码 代码如下: function regIsDigit(fData) { var reg = new RegExp("^[0-9]$"); return (reg.test(fData)); } 利用这则表达式获取字符串的长度 复制代码 代码如下: function regDataLength(fData) { var valLength = fData.length; var reg = n

  • 收藏的js表单验证控制代码大全第1/3页

    关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单: 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制  2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js

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

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

  • javascript表单验证 - Parsley.js使用和配置

    在线演示 大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能,基于它的强大DOM-API. 主要特性 •基于超棒的用户体验 •超级方便配置 •超轻量级(压缩后12K),支持jQuery和Zepto •超简单,只需要简单配置DOM-API,类似jQuery的data API •绝对免费

  • jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

  • JavaScript 表单验证正则表达式大全[推荐]

    具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?

  • AngularJS使用ngMessages进行表单验证

    AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

随机推荐