JS表单提交验证、input(type=number) 去三角 刷新验证码


Posted in Javascript onJune 21, 2017

在进行表单提交时,需要对输入框和文本域等的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),

JS表单提交验证、input(type=number) 去三角 刷新验证码 

很明显,有些场合我们不需要它们,影响美观度,可利用以下方法将其去掉

JS表单提交验证、input(type=number) 去三角 刷新验证码

<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) 去三角 刷新验证码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
vue组件横向树实现代码
Aug 02 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
JS图片预加载插件详解
Jun 21 #Javascript
解决Extjs下拉框不显示的问题
Jun 21 #Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 #Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 #Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 #Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 #Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 #Javascript
You might like
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
javascript web页面刷新的方法收集
2009/07/02 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
200行自定义python异步非阻塞Web框架
2017/03/15 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python组合无重复三位数的实例
2018/11/13 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
写一个函数,求一个字符串的长度。在main函数中输入字符串,并输出其长度
2015/11/18 面试题
高三生物教学反思
2014/01/25 职场文书
网络编辑职责
2014/03/01 职场文书
弄虚作假心得体会
2014/09/10 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
七一晚会主持词
2015/06/29 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS