博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Html input 常见问题
阅读量:4969 次
发布时间:2019-06-12

本文共 1854 字,大约阅读时间需要 6 分钟。

1.input回车事件不执行导致页面刷新

场景:在文本框中输入关键字按回车,页面自动刷新了

解决方法1:

  一个表单下,如果只有一个文本框时,按下回车将会触发表单的提交事件。  既然是只有一个文本框才会出问题,那么可以加一个隐藏的文本框

解决方法2:(推荐)

  <form name="keywordForm" method="post" action="" οnsubmit="return false;">  就是在表单 form 后面加上一个 onsubmit 事件,返回 false,来阻止 form 提交。

 解决方法3:(不推荐)

document.οnkeydοwn=function(e){        var e = e || event;        var currKey = e.keyCode || e.which || e.charCode;//支持IE,FireFox        if (currKey == 13) {            return false;        }    }

解决方法4:

 function ClearSubmit(e) {      if (e.keyCode == 13) {         return false;      }   }

 

2.表单校验之datatype

  凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式。

  如果还不能满足您的验证需求,可传入自定义datatype,可绑定的附加属性有:datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin等.

  内置基本的datatype类型有: * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url

  5.2版本之后,datatype支持规则累加或单选。用","分隔表示规则累加;用"|"分隔表示规则多选一,即只要符合其中一个规则就可以通过验证,绑定的规则会依次验证,只要验证通过,后面的规则就会忽略不再比较。

  5.2.1版本之后,datatype支持:直接绑定正则:如可用这样写datatype="/\w{3,6}/i",要求是3到6位的字母,不区分大小写;

   

  http://deerchao.net/tutorials/regex/regex.htm#lookaround

  参考链接:http://blog.csdn.net/zhangdaiscott/article/details/26375043

 

3.html5 原生表单验证

  html5 原生表单验证 + ajax 提交 无需任何第三方验证框架 通过pattern 和 oninvalid 属性统一验证表单 。

  oninvalid:提交的input元素的值为无效值时(这里是正则验证失败),触发oninvalid事件。oninvalid属于Form 事件。

  setCustomValidity():这个是HTML5内置的JS方法,用来自定义提示信息

  pattern 属性规定用于验证输入字段的正则表达式。

  注释:pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 。

            

 

  参考:

  http://blog.csdn.net/xiawu1990/article/details/49893473

  http://blog.csdn.net/qq_21707807/article/details/53035977

  http://blog.csdn.net/teresa502/article/details/8524184

 

 

 

 

转载于:https://www.cnblogs.com/xcsn/p/7244667.html

你可能感兴趣的文章
呼叫器
查看>>
Hadoop Archives
查看>>
.Net基础篇_学习笔记_第六天_for循环语法_正序输出和倒序输出
查看>>
Java 十进制和十六制之间的转化(负数的处理)
查看>>
反射那些事儿——Java动态装载和反射技术
查看>>
Java Swing提供的文件选择对话框 - JFileChooser
查看>>
排序:冒泡排序
查看>>
github下载安装
查看>>
QQ群技术:0成本创建2000人QQ群技巧
查看>>
jdk升级到8 AndroidStudio升级到2.3.1 后 greendao犯病
查看>>
asp.net前台页面与后台之间传值,
查看>>
sicily-1029 Rabbit
查看>>
30分钟学会React Hook, Memo, Lazy
查看>>
BZOJ 1567: [JSOI2008]Blue Mary的战役地图
查看>>
取余运算(mod)(分治)
查看>>
括号编码
查看>>
课程作业五
查看>>
typename使用在模板中区分static成员和类型
查看>>
旋转队列
查看>>
归并排序
查看>>