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精华代码集
Jan 24 Javascript
用js生产批量批处理执行命令
Jul 28 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
jquery实现倒计时效果
Dec 14 Javascript
封装属于自己的JS组件
Jan 27 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 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
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
js 替换
2008/02/19 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
js 只比较时间大小的实例
2017/10/26 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python类继承用法实例分析
2015/05/27 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
工厂实习感言
2014/01/14 职场文书
黄河的主人教学反思
2014/02/07 职场文书
网页美工求职信
2014/02/15 职场文书
合唱兴趣小组活动总结
2014/07/10 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
详解Nginx 工作原理
2021/03/31 Servers
用基于python的appium爬取b站直播消费记录
2021/04/17 Python