HTML5中将中文表单验证默认提示语句改为英文！

js代码：

function checkEmail(){var email=document.getElementById("eject_email");if(email.value){email.setCustomValidity("");}else if(email.validity.valueMissing){email.setCustomValidity("E-mail can not be empty!");return false;};if(email.validity.typeMismatch){email.setCustomValidity("The email format you entered is incorrect, please re-enter!");return false;}}var btn=document.getElementById("eject_btn");btn.onclick = function(){if(checkEmail()){return false;}return true;}

form代码：

<form action="#" method="post"><label>Email ADDRESS *</label><input  name="email" id="eject_email"  required  type="email" placeholder="Please enter your email address, we will send you a quotation and customized plan according to your needs"><button type="submit" id="eject_btn">SUBMINTS</button></form>

参考资料：

HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的validityState对象。
HTML5表单新增的属性中有一个validity属性，通过该属性可以获得一个validityState的对象，而validityState对象针对表单的几个错误验证又提供了8个属性：

valueMissing
必填项为空，返回true，否则返回false，配合required属性使用
typeMismatch
判断输入类型是否匹配，不匹配返回true，否则返回false，配合email、number、url等类型使用
patternMismatch
判断正则是否通过，没通过返回true，通过返回false，配合pattern属性使用
toolong
判断当前元素的值的长度是否大最大值，大于返回true，否则返回false，配合maxlength使用，但实际上如果设置maxlength，就无法输入超出长度范围的值
rangeUnderflow
判断当前元素值是否小于min，与min属性配合，不与max比较
rangeOverflow
判断当前元素值是否大于max，与max属性配合，不与min比较
stepMismatch
判断当前元素值是否符合step要求，与step属性配合
customError
使用自定义的验证错误提示信息，配合setCustomValidity()方法使用；
如果使用了setCustomValidity()方法，customError属性返回true，那么当输入正确时，不能使用上述的任何一种属性验证输入是否正确，所有的验证都返回false，表单的验证逻辑将会出现bug。因此，在自定义错误提示信息时，需要首先使用input.value判断输入是否为空，如果不是空值，调用input.setCustomValidity(“”)将提示信息设为空，从而屏蔽输入正确时出现的验证逻辑错误，之后再设置自定义错误提示语，示例：的v反对

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title> New Document </title>
</head>
<body><form action="#"><input id="user" type="text" required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="请输入用户名"/><input type="submit" id="btn" value="提交"></form>
</body>
<script>function checkUser(){var user=document.getElementById("user");if(user.value){user.setCustomValidity("");//现将有输入时的提示设置为空}else if(user.validity.valueMissing){user.setCustomValidity("用户名不能为空");  return false;};if(user.validity.patternMismatch){ user.setCustomValidity("用户名只能是英文或数字，长度6到12位");return false;}}var btn=document.getElementById("btn");btn.onclick = function(){//checkUser();if(checkUser()){return false;}return true;}</script>
</html>

参考网址：HTML5中修改表单验证默认提示语句而valid

HTML5中将中文表单验证默认提示语句改为英文！相关推荐

selenium定位H5表单验证的提示语
selenium定位H5表单验证的提示语前端代码,1.html <!DOCTYPE html> <html lang="en"> <head> ...
html5自带表单验证-美化改造
神奇的代码暂且叫做html5.css /* === HTML5 validation styles === */ .myform select:required, .myform input:req ...
jQuery表单验证气泡提示插件
下载地址表单验证jQuery插件提示用验证元素右侧气泡的形式,很容易使用和灵活的结构也很实用. dd:
HTML5表单验证required提示的中文设置为英文
默认提示是"请输入此字段" 只需要在后面加上 oninvalid="setCustomValidity('Please enter your message!');&q ...
表单验证失败提示方案（自用）
方案动态计算定位,fixed于失败项附近,并定时消失,多个提示一同显示. 遇到问题当表单处于dialog中,并且表单高度大于dialog高度,验证失败项又刚好在被overflow隐藏的部分,需要对 ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
jQuery html5Validate基于HTML5表单验证插件
更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...
HTML5自定义表单验证错误提示信息
有如下HTML结构: <form action="ok.html"><input type="text" pattern="\d{1 ...
html表单验证案例,HTML5表单验证（4个实用的表单美化案例）
multipart/form-data 在使用包含文件上传控件的表单时,必须使用 autocomplete="on" 自动补全功能 novalidate 不验证 placehold ...

HTML5中将中文表单验证默认提示语句改为英文！

HTML5中将中文表单验证默认提示语句改为英文！相关推荐

最新文章

热门文章