原生h5表单验证
来源:互联网 发布:sql中union的用法 编辑:程序博客网 时间:2024/05/19 02:31
近来做项目时发现h5表单验证挺不错的,毕竟原生的用起来比较方便简单,在此做个总结:
1.现在我们来简单的实现一个h5表单验证:
<!DOCTYPE html><form> <input id="text" pattern="^1[3-9]\d{9}$" required /> <input id="button" type="submit" /></form><script>text.oninput=function(){ text.setCustomValidity("");};text.oninvalid=function(){ text.setCustomValidity("请不要输入火星的手机号好吗?");};</script>
tip:在使用pattern时需要input不能为空,所以必须要用上required,否则pattern不会起作用。
2.当然如果你想使用h5的表单验证就必须使用submit来提交form哦,不然h5的表单验证是不能起作用的,那么如果我们想要在表单submit之前做一些逻辑判断我们可以使用下面两种方法:
当输入用户名和密码为空的时候,需要判断。这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写;有两种方法,一种是用submit提交。一种是用button提交。方法一:在jsp的前端页面的头部插入一个js方法: function checkUser(){ var result = document.getElementById("userid").value; var password = document.getElementById("userpassid").value; if(result == "" ){ alert("用户名不能为空"); return false; } if(password == "" ){ alert("密码不能为空"); return false; }else{ return true; }}在form表单里写成这样:<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.action' onsubmit = "return checkUser();" > <table width="100%" border="0"> <tr> <td width="60" height="40" align="right">用户名 </td> <td><input type="text" value="" class="text2" name = "username" id = "userid"/></td> </tr> <tr> <td width="60" height="40" align="right">密 码 </td> <td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td> </tr> <tr> <td width="60" height="40" align="right"> </td> <td><div class="c4"> <input type="submit" value="" class="btn2" /> 方法二:function checkUser(){ var result = document.getElementById("userid").value; var password = document.getElementById("passid").value; if(result == "" ){ alert("用户名不能为空"); return false; } if(password == "" ){ alert("密码不能为空"); return false; } document.getElementById("formid").submit();}form表格的写法,需要写id <form id="formid" method = 'post' action = 'user_login_submit.action' >button按钮的写法如下:<input type="button" value="" class="btn2" onclick = "checkUser();" />
3.我们需要了解input标签的h5属性(参考网址:http://www.w3school.com.cn/tags/tag_input.asp)
阅读全文
0 0
- 原生h5表单验证
- layui原生表单验证
- H5表单的pattern验证
- H5验证表单数据是否合法
- 原生js表单验证代码
- H5表单验证自定义提示文字
- 还算实用的验证表单H5
- html5 原生表单验证+ajax 提交
- 表单动态验证之原生Ajax
- h5、原生
- 原生js实现表单验证(提交后验证)
- H5表单
- h5 表单
- H5~表单
- H5利用pattern属性和oninvalid属性验证表单
- H5表单验证不得为空,自定义提示语
- 【ajax技术学习】原生ajax表单用户名验证
- 表单验证-从js原生代码到Jquery validate
- 检测linux系统支持的soket选项
- 安装nginx服务器用于rtmp(ios端)推流测试
- Jenkins 搭建C++持续集成环境
- Handler浅析——学习笔记
- Hadoop安装及开发环境配置
- 原生h5表单验证
- Tomcat获取Nginx反向代理的客户端IP地址
- Logdump Reference for Oracle GoldenGate12c (12.2.0.1)中文翻译
- OBM,ODM,OEM分别指什么
- javascript中 对象创建的三种方式及其调用方法
- Activity生命周期
- qt之不能打开源代码的问题
- MOOC清华《程序设计基础》第4章:查找扑克牌(折半查找)
- 散列、加密、编码 漫谈