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内置对象
Jun 19 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
Javascript var变量删除原理及实现
Aug 26 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
php获取系统变量方法小结
2015/05/29 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
读jQuery之二(两种扩展)
2011/06/11 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
浅谈node的事件机制
2017/10/09 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
在Python中等距取出一个数组其中n个数的实现方式
2019/11/27 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
Mio Skincare美国官网:身体紧致及孕期身体护理
2017/03/05 全球购物
大学生如何写自荐信
2014/01/08 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
销售主管竞聘书
2014/03/31 职场文书
班主任评语大全
2014/04/26 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
银行求职信模板
2015/03/20 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL