js实现表单
| <html> | |
| <head> | |
| <title>表单页面</title> | |
| <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> | |
| <script> | |
| function checkData(){ | |
| var canSub = true; | |
| //非空校验 | |
| canSub = checkNull("username","用户名不能为空！") && canSub; | |
| canSub = checkNull("password","密码不能为空！")&& canSub; | |
| canSub = checkNull("password2","确认密码不能为空！")&& canSub; | |
| canSub = checkNull("nickname","昵称不能为空！")&& canSub; | |
| canSub = checkNull("email","邮箱不能为空！")&& canSub; | |
| canSub = checkNull("valistr","验证码不能为空！")&& canSub; | |
| canSub = checkNull("img","头像不能为空！")&& canSub; | |
| //描述信息非空校验 | |
| document.getElementById("desc_msg").innerText = ""; | |
| var desc = document.getElementsByName("desc")[0]; | |
| if(desc.value == "请输入描述信息~！"){ | |
| document.getElementById("desc_msg").innerText = "描述信息不能为空！"; | |
| canSub = false; | |
| } | |
| //爱好非空校验 | |
| document.getElementById("like_msg").innerText = ""; | |
| var likes = document.getElementsByName("like"); | |
| var hasLike = false; | |
| for(var i = 0;i<likes.length;i++){ | |
| if(likes[i].checked == true){ | |
| hasLike = true; | |
| break; | |
| } | |
| } | |
| if(!hasLike){ | |
| document.getElementById("like_msg").innerText = "爱好不能为空！"; | |
| canSub = false; | |
| } | |
| //性别非空校验 | |
| document.getElementById("gender_msg").innerText = ""; | |
| var genders = document.getElementsByName("gender"); | |
| var hasGender = false; | |
| for(var i = 0;i<genders.length;i++){ | |
| if(genders[i].checked == true){ | |
| hasGender = true; | |
| break; | |
| } | |
| } | |
| if(!hasGender){ | |
| document.getElementById("gender_msg").innerText = "性别不能为空！"; | |
| canSub = false; | |
| } | |
| //两次密码一致的校验 | |
| var psw1 = document.getElementsByName("password")[0].value; | |
| var psw2 = document.getElementsByName("password2")[0].value; | |
| if(psw1 != "" && psw2 !="" && psw1 != psw2){ | |
| document.getElementById("password2_msg").innerText = "两次密码不一致！"; | |
| canSub = false; | |
| } | |
| //邮箱格式的校验 | |
| var email = document.getElementsByName("email")[0].value; | |
| if(email.value != "" && !/^\w+@\w+(\.\w+)+$/.test(email)){ | |
| document.getElementById("email_msg").innerText = "邮箱格式不正确！"; | |
| canSub = false; | |
| } | |
| return canSub; | |
| } | |
| /*检验非空公共方法*/ | |
| function checkNull(name,msg){ | |
| document.getElementById(name+"_msg").innerText = ""; | |
| var tag = document.getElementsByName(name)[0]; | |
| if(tag.value == ""){ | |
| document.getElementById(name+"_msg").innerText = msg; | |
| return false; | |
| } | |
| return true; | |
| } | |
| //描述信息处理 | |
| function descFocus(obj){ | |
| if(obj.value == "请输入描述信息~！"){ | |
| obj.value = ""; | |
| } | |
| } | |
| function descBlur(obj){ | |
| if(obj.value == ""){ | |
| obj.value = "请输入描述信息~！"; | |
| } | |
| } | |
| </script> | |
| <style type="text/css"> | |
| span{ | |
| color:red; | |
| font-size:12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="http://localhost:8080" method="POST" onsubmit="return checkData()"> | |
| <table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink"> | |
| <caption><font color="red" size="6">注册表单</font></caption> | |
| <input type="hidden" name="id" value="9527"/> | |
| <tr> | |
| <td>用户名:</td> | |
| <td><input type="text" name="username" /> <span id="username_msg"></span></td> | |
| </tr> | |
| <tr> | |
| <td>密码:</td> | |
| <td><input type="password" name="password"/> <span id="password_msg"></span></td> | |
| </tr> | |
| <tr> | |
| <td>确认密码:</td> | |
| <td><input type="password" name="password2"/> <span id="password2_msg"></span></td> | |
| </tr> | |
| <tr> | |
| <td>性别：</td> | |
| <td> | |
| <input type="radio" name="gender" value="男"/>男 | |
| <input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>昵称：</td> | |
| <td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td> | |
| </tr> | |
| <tr> | |
| <td>邮箱：</td> | |
| <td><input type="text" name="email"/> <span id="email_msg"></span></td> | |
| </tr> | |
| <tr> | |
| <td>爱好：</td> | |
| <td> | |
| <input type="checkbox" name="like" value="lq"/>篮球 | |
| <input type="checkbox" name="like" value="zq"/>足球 | |
| <input type="checkbox" name="like" value="qq"/>铅球 | |
| <input type="checkbox" name="like" value="blq"/>玻璃球 | |
| <span id="like_msg"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>客户类型：</td> | |
| <td> | |
| <select name="type"> | |
| <option value="pm">平民</option> | |
| <option value="sxdy">少先队员</option> | |
| <option value="gqty">共青团员</option> | |
| <option value="ybdy">预备党员</option> | |
| <option value="zsdy">正式党员</option> | |
| </select> | |
| <span id="type_msg"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>头像：</td> | |
| <td> | |
| <input type="file" name="img"/> <span id="img_msg"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>描述信息：</td> | |
| <td> | |
| <textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>验证码：</td> | |
| <td> | |
| <input type="text" name="valistr"/> | |
| <img src="1.jpg" width="100px" height="20px"/> | |
| <span id="valistr_msg"></span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td colspan="2" align="right"> | |
| <input type="submit" value="提 交"/> | |
| <input type="reset" value="重 置"/> | |
| </td> | |
| </tr> | |
| </table> | |
| </form> | |
| </body> | |
| </html> |
js实现表单的更多相关文章
- js验证表单大全
js验证表单大全 1. 长度限制 <script> function test() { if(document.a.b.value.length>50) { alert(" ...
- JS 更改表单的提交时间和Input file的样式
JS转换时间 function renderTime(data) { var da = eval('new ' + data.replace('/', '', 'g').replace('/', '' ...
- js动态控制表单表格
js动态控制表单表格,这里操作只讲,添加一行,删除一行,删除某一行某一列. 直接放代码: <!DOCTYPE html> <html> <head> <met ...
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- Vue.js：表单
ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度
[卡法 常用js库]: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度 // +---------------------- ...
- js实现表单验证 常用JS表单验证
CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:;margin:;} #he ...
- springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
随机推荐
- 性能测试的过程（jmeter）
一.web性能测试的准备工作 1.项目背景 访问地址 访问环境:windows 2.需求 并发登陆的性能(要求多少个用户登录) 3.场景 60秒内运行100个线程 线程在20.50.100并发下的表现 ...
- 2019清明期间qbxt培训qaq
4.4下午:矩阵qwq part1矩阵乘法: 概念: 一个m×p的矩阵A 乘 一个p×n的矩阵B 得到一个矩阵一个m×n的矩阵AB 其中: 矩阵乘法满足结合律.分配率,不满足交换律 矩阵乘法—solu ...
- 『TensorFlow』降噪自编码器设计
背景简介 TensorFlow实现讲解 设计新思路: 1.使用类来记录整个网络: 使用_init_()属性来记录 网络超参数 & 网络框架 & 训练过程 使用一个隐式方法初始化网络参数 ...
- MVC 简介
是AOP (Aspect-Oriented Programming.面向侧 面的程序设计或面向方面的程序设计,是对面向对象程序设计的改进和扩展)内的概念 当 一 件事被细分为各个单元后,各个单元的复 ...
- scrapy---反爬虫
反爬虫措施1)动态修改User-Agent2)动态修改ip3)延迟DOWNLOAD_DELAY = 0.5 1)在middleware中新建一个类,从fake_useragent中导入UserAgen ...
- js 浏览器 宽高 各种
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((do ...
- c函数 文件名通配符
static bool IsMatched(CONST TCHAR* p, CONST TCHAR* q) { CONST TCHAR *r, *z, *x = _T(""); f ...
- Python *Mix_w2
1.循环: 执行流程: 1. 判断条件是否为真. 如果真. 执行代码块 2. 再次判断条件是否为真...... 3. 当条件为假.执行else 跳出循环. 循环结束. while 条件: 代码块(又叫 ...
- 查看apk文件包名的一些方法
1,如果有源码 直接将apk包修改为zip,并解压找到AndroidManifest.xml文件,在文件中搜索“package”找到相应的包名 2,使用adb命令 前提是已经下载android SDK ...
- Beta 冲刺 （5/7）
Beta 冲刺 (5/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 组织会议 确定统一界面wxpy.db之 ...