使用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 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
js实现文字截断功能
Sep 14 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 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
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
js 代码优化点滴记录
2012/02/19 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
vue项目中js-cookie的使用存储token操作
2020/11/13 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python线程指南详细介绍
2017/01/05 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
搞笑创意广告语
2014/03/17 职场文书
师范生见习报告范文
2014/11/03 职场文书
旷课检讨书
2015/01/26 职场文书
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android