使用JavaScript进行表单校验功能


Posted in Javascript onAugust 01, 2017

文本框校验

以下是文本框的校验步骤。

1.获取待校验的文本框value值,

2.对value值设置判定条件,使用if语句或switch语句实现。

3. 若满足条件,则校验通过,返回值为true。

4. 若不满足条件则返回值为false,替换文本输出校验的提示信息。

5. 表单获取多个验证的返回值,做逻辑运算,将参数传递给表单form的onsubmit事件。

6. 在input中调用校验函数,我使用的是onblur事件触发校验函数。

下拉框校验

下拉框的校验相比文本框略有不同,下拉框中option的返回值为value,由select中的name值获取到用户的选择,因此在下拉框的校验函数中通过id获取到select中的value,在根据value值是否为空或为其余的非法值而进行不同的判断,其余的步骤也与文本框相同。

表单校验样式如下:

使用JavaScript进行表单校验功能 
使用JavaScript进行表单校验功能 
使用JavaScript进行表单校验功能

遇到的问题

  • 校验表单时出现问题但表单仍然能够提交?
  • 原因:onsubmit事件作为一个提交动作有一个默认的参数,这个参数的默认值为true,前面提到如果满足条件要求就返回true否则返回false,每一项的校验中都要设置一个布尔类型的返回值,如果所有的校验全部通过才能正常提交表单,只要有一项不满足条件也不能提交表单而需要重新输入,因此需要对每一项校验函数的返回值做一个逻辑运算,全为真则最终返回给onsubmit的值为true,否则为false,而onsubmit的参数为false则无法提交,故实现了表单校验失败时阻止提交。
  • 一开始输入错误的内容,在修改变成正确的内容之后提示仍然为之前的提示?
  • 原因:在返回值为true时,将输出提示信息的文本内容置为空,即document.getElementById(“什么什么”).innerHTML=”“;
  • onchange和onblur事件都可以用来触发校验,并且两者都会在失去焦点之后实现校验,但onblur触发校验时有可能会由于用户间断输入而提示输入内容不符合要求。
  • 表单校验的js代码段不能等页面都加载完成之后加载。

代码块

以下为程序源码:

<script>
function validateUsername(){ 
var input = document.myform.userName.value; 
if(input == “”||input == null) { 
document.myform.userName.focus(); 
document.getElementById(“uname”).innerHTML=”用户名不能为空!”; 
return false; 
} 
else if(input.length>5 || input.length<2){ 
document.getElementById(“uname”).innerHTML= “用户名在2~5位”; 
document.myform.userName.focus(); 
return false; 
} 
else{ 
document.getElementById(“uname”).innerHTML=”“; 
return true; 
} 
} 
function validatePassword(){ 
var password = document.myform.password.value;
if(password == “”||password == null) { 
document.getElementById(“upss”).innerHTML = “密码不能为空!”; 
document.myform.password.focus(); 
return false;
} 
else if(password.length>12 || password.length<6){ 
document.getElementById(“upss”).innerHTML= “密码在6~12位”; 
document.myform.password.focus(); 
return false; 
} 
else{ 
document.getElementById(“upss”).innerHTML= “”; 
return true; 
} 
} 
function validatePasswordAgain(){ 
var psw = document.myform.psw.value; 
var password = document.myform.password.value; 
if(psw!=password){ 
document.getElementById(“upssa”).innerHTML=”两次密码输入不同”; 
return false; 
}else{ 
document.getElementById(“upssa”).innerHTML = “”; 
return true; 
} 
} 
function validateGroup(){ 
var select = document.getElementById(“select”); 
if(select.value == “NONE”){ 
document.getElementById(“groupID”).innerHTML=”请选择分组!”;
return false; 
}else { 
document.getElementById(“groupID”).innerHTML=”“;
return true; 
} 
} 
function validateForm(){ 
var flag = validateUsername()&&validatePassword()&&validatePasswordAgain()&&validateGroup(); 
if(flag){ 
return true; 
}else return false; 
}

```html

<div class="warp"> 
<h1>新用户注册</h1>
<form action="/myproject/admin/addUser" name="myform" onsubmit="return validateForm()">
<div class="form-warp">  
 <ul>
  <li>用户名称:<input class="input" type="text" name="userName" placeholder="请输入..." onblur="validateUsername()"/></li>
  <li>密 码:<input class="input" type="password" name="password" id="password" placeholder="请输入..." onblur="validatePassword()"/></li>
  <li>确认密码:<input class="input" type="password" name="psw" id="psw" placeholder="请输入..." onblur="validatePasswordAgain()"/></li>
  <li>真实姓名:<input class="input" type="text" name="realName" placeholder="请输入..."/></li>
  <li>分 组:<select name="group.id" id="select" onblur="validateGroup()">
     <option value="NONE">请选择...</option>
     <#list groups as group>
      <option value="${group.id}">${group.name}</option>
     </#list>
     </select>
  </li>
  <li><input type="submit" value="提交" id="button"/></li>
 </ul>
<ul class="validate">
 <li id="uname"></li>
 <li id="upss"></li>
 <li id="upssa"></li>
 <li id="groupID"></li>
</ul>
</div>
</form>
</div>
“`

总结

以上所述是小编给大家介绍的使用JavaScript进行表单校验功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
谈一谈bootstrap响应式布局
May 23 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 #Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 #Javascript
在ABP框架中使用BootstrapTable组件的方法
Jul 31 #Javascript
knockoutjs模板实现树形结构列表
Jul 31 #Javascript
本地存储localStorage用法详解
Jul 31 #Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 #Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 #Javascript
You might like
国内php原创论坛
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python使用turtule画五角星的方法
2015/07/09 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
建龙钢铁面试总结
2014/04/15 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
对孩子的寄语
2014/04/09 职场文书
学习保证书范文
2014/04/30 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
文秘自荐信
2014/06/28 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
日元符号 ¥
2022/02/17 杂记