在进行表单提交时,需要对输入框和文本域等的value的合理性进行验证,可以编写form的onSubmit事件,代码,踩过的坑;注意点:
1、只有通过form里面的 <button type="submit" >提交</button>进行表单的提交才会触发form的onSubmit事件,如果是通过button的onclick事件进行表单提交则不会触发form的onSubmit事件
2、 onSubmit事件的正确写法是:<form action="" method="post" onsubmit="return checkFrom();">注意写上 return ,不写没有作用
function checkFrom(){ var username=$('#username').val(); alert(username); var pwd=$('#pwd').val(); if(username==null || username==""){ $('#codeInfo').html("请输入用户名"); $('#username').focus(); return false; }else if(pwd==null || pwd==""){ $('#codeInfo').html("请输入密码"); $('#pwd').focus(); return false; }else{ return true; } }
3、HTML5,input 提供很多新型的type,省去了我们写JavaScript正则表达式来限定输入值的类型的时间,比如,number,email,tel等等,表示需要输入合法的数字,邮箱,电话号码等。但是我发现将type设置为number之后,让它只接受数字的输入,会出现两个三角形,用于调整数字的大小(加1减1),
很明显,有些场合我们不需要它们,影响美观度,可利用以下方法将其去掉
<style type="text/css"> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } input[type="number"]{-moz-appearance:textfield;} </style>
4、验证码是常常见到的小部件,获取验证码,点击刷新,应传递一个参数避免多次获取同一个验证码,这时候常常考虑时间戳或者随机数,此处采用随机数
<div class="form-group input-group"> <span class="input-group-addon" style="padding: 0px;"> <img alt="验证码" src="<%=basePath %>code/verifyCode" title="看不清可点击刷新验证码" style="cursor:pointer;" onclick="this.src='<%=basePath %>code/verifyCode?d='+Math.random();"></span> <input type="number" class="form-control" id="code" placeholder="输入验证码" onblur="validateCode(this.value)"/> </div>
5、来个综合的代码吧
<style type="text/css"> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none !important; margin: 0; } input[type="number"]{-moz-appearance:textfield;} </style> <script type="text/javascript"> function checkFrom(){ var username=$('#username').val(); alert(username); var pwd=$('#pwd').val(); if(username==null || username==""){ $('#codeInfo').html("请输入用户名"); $('#username').focus(); return false; }else if(pwd==null || pwd==""){ $('#codeInfo').html("请输入密码"); $('#pwd').focus(); return false; }else{ return true; } } </script>
form表单部分:
<form role="form" action="" method="post" onsubmit="return checkFrom();"> <hr /> <h5>Enter Details to Login</h5> <br /> <div class="form-group input-group"> <span class="input-group-addon"><i class="fa fa-tag"></i></span> <input type="text" class="form-control" placeholder="Your Username " name="username" id="username" /> </div> <div class="form-group input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" placeholder="Your Password" name="pwd" id="pwd" /> </div> <div class="form-group input-group"> <span class="input-group-addon" style="padding: 0px;"> <img alt="验证码" src="获取验证码的URL" title="看不清可点击刷新验证码" style="cursor:pointer;" onclick="this.src='获取验证码的URL?d='+Math.random();"></span> <input type="number" class="form-control" id="code" placeholder="输入验证码" onblur="validateCode(this.value)" /> </div> <div class="form-group input-group"> <span id="codeInfo" style="color: #f55"></span> </div> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" /> Remember me </label> <span class="pull-right"> <a href="index.html" rel="external nofollow" >Forget password ? </a> </span> </div> <button type="submit" class="btn btn-primary ">Login Now</button> </form>
以上所述是小编给大家介绍的JS表单提交验证、input(type=number) 去三角 刷新验证码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍jQuery EasyUI提交表单验证,包括了jQuery EasyUI提交表单验证的使用技巧和注意事项,需要的朋友参考一下 EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性。 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email:匹配 email 正则表达式规则,系统提供的属性
本文向大家介绍Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证),包括了Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)的使用技巧和注意事项,需要的朋友参考一下 AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴。 一,点击提交验证 当用户试图提交表单时,你可以在作用
问题内容: 我正在构建一个两步表单的Angular JS应用。它实际上只是一种形式,但是当用户单击“下一步”按钮并转到步骤2时,使用JavaScript隐藏了第一个面板,并显示第二个面板。我在步骤1中的某些字段上设置了“必需”验证但是很明显,当用户单击“下一步”按钮时,它们不会得到验证…在步骤2的最后单击“提交”按钮时,它们将得到验证。 单击“下一步”按钮时,有什么方法可以告诉angular验证表
问题内容: HTML: 用于侦听输入[type = file]的自定义指令更改: 选择文件后,控制台中将显示以下错误: 错误:InvalidStateError:DOM异常11错误:试图使用一个不可用或不再可用的对象。 尝试使用plunkr:http ://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview 没有该指令,输入文件字段的状态将不会被推送到form
问题内容: 我有一个模式表单,用户必须完成表单(否则验证将显示必填字段错误消息),然后单击“提交输入类型”,不执行任何操作,然后再次单击它,然后将通过ajax发布,并返回“谢谢”消息。 我环顾了Stackoverflow,并为遇到的问题应用了答案,但仍然无法正常工作。我确实删除了event.preventDefault(); 从中,以及$(“#review- form”)。submit(funct
问题内容: 您好,我正在实现一个登录页面,从PHP方面来看一切正常,但是现在我将使用jQuery实现另一个功能:我想检查登录字段是否为空,如果不是,则在页面上打印一些内容,否则继续用php,该怎么做? 这是我的HTML代码的一部分: 问题答案: 将事件绑定到表单的提交(注意:并非单击提交按钮)。那就是您的代码去检查表单的地方,并在必要时阻止其发布。 如果您希望显示消息而不是使用对话框,请在页面上某
问题内容: JavaScript位: HTML位: 这就是我要使用的代码。我的想法是在使用Ajax发送表单之前,先验证所有输入。我现在已经尝试过许多版本,但是每次即使表单没有完全填写,最终还是要提交。我所有的输入都是“必需”类的。谁能看到我做错了吗? 另外,由于我的输入名称是用php生成的,因此我依赖于基于类的要求,因此我永远无法确定自己获得的名称或输入类型。 我在“页面”中显示/隐藏问题。 JS
CodeIgniter 提供了一个全面的表单验证和数据预处理类以帮助缩减你所写的代码。 概述 表单验证指南 表单 成功页面 控制器 设置验证规则 使用一个数组设置验证规则 级联规则(Cascading Rules) 预处理数据(Prepping Data) 重新填充表单(Re-populating the Form) 回调 设置错误信息 更改错误定界符 翻译表单域名字 独立显示错误 将一系列验证规