【ife】任务三十二:表单(四)实现表单自动生成工厂
来源:互联网 发布:软件开发工程师考试 编辑:程序博客网 时间:2024/05/22 12:24
var nameObj = { label: '名称', type: 'text', rules: '必填,长度为4-16个字符', success: '格式正确', fail1: '名称不能为空', fail2: '字符数为4~16位', producer: function() { var labelText = document.createTextNode(this.label); var label = document.createElement("label"); label.appendChild(labelText); document.getElementsByTagName("body")[0].appendChild(label); var input = document.createElement("input"); input.setAttribute("type", this.type); document.getElementsByTagName("body")[0].appendChild(input); var div = document.createElement("div"); document.getElementsByTagName("body")[0].appendChild(div); }, validator: function() { var that = this;var inputs = document.getElementsByTagName("input");var divs = document.getElementsByTagName("div"); inputs[0].onfocus = function() {divs[0].innerHTML = that.rules;}inputs[0].onblur = function() {var len = getLength(inputs[0].value);if (len == 0) {divs[0].innerHTML = that.fail1;description(inputs[0], false);} else if (len < 4 || len > 16) {divs[0].innerHTML = that.fail2;description(inputs[0], false); } else {divs[0].innerHTML = that.success;description(inputs[0], true); }} }};var passwordObj = {label: '密码', type: 'password', rules: '必填,长度为6-16位', success: '密码可用', fail1: '密码不能为空', fail2: '密码长度为6~16位', producer: function() { var labelText = document.createTextNode(this.label); var label = document.createElement("label"); label.appendChild(labelText); document.getElementsByTagName("body")[0].appendChild(label); var input = document.createElement("input"); input.setAttribute("type", this.type); document.getElementsByTagName("body")[0].appendChild(input); var div = document.createElement("div"); document.getElementsByTagName("body")[0].appendChild(div); }, validator: function() { var that = this;var inputs = document.getElementsByTagName("input");var divs = document.getElementsByTagName("div"); inputs[1].onfocus = function() {divs[1].innerHTML = that.rules;}inputs[1].onblur = function() {var len = inputs[1].value.length;if (len == 0) {divs[1].innerHTML = that.fail1;description(inputs[1], false); } else if (len < 6 || len > 16) {divs[1].innerHTML = that.fail2;description(inputs[1], false); } else {divs[1].innerHTML = that.success;description(inputs[1], true); }} }}var confrmPasswordObj = {label: '确认密码', type: 'password', rules: '再次输入相同密码', success: '密码输入一致', fail1: '确认密码不能为空', fail2: '密码输入不一致', producer: function() { var labelText = document.createTextNode(this.label); var label = document.createElement("label"); label.appendChild(labelText); document.getElementsByTagName("body")[0].appendChild(label); var input = document.createElement("input"); input.setAttribute("type", this.type); document.getElementsByTagName("body")[0].appendChild(input); var div = document.createElement("div"); document.getElementsByTagName("body")[0].appendChild(div); }, validator: function() { var that = this;var inputs = document.getElementsByTagName("input");var divs = document.getElementsByTagName("div"); inputs[2].onfocus = function() {divs[2].innerHTML = that.rules;}inputs[2].onblur = function() {var len = inputs[2].value.length;if (len == 0) {divs[2].innerHTML = that.fail1;description(inputs[2], false); }else if (inputs[1].value == inputs[2].value) {divs[2].innerHTML = that.success;description(inputs[2], true); } else {divs[2].innerHTML = that.fail2;description(inputs[2], false); }} }}var emailObj = {label: '邮箱', type: 'text', rules: '请输入邮箱地址', success: '邮箱格式正确', fail1: '邮箱不能为空', fail2: '邮箱格式错误', producer: function() { var labelText = document.createTextNode(this.label); var label = document.createElement("label"); label.appendChild(labelText); document.getElementsByTagName("body")[0].appendChild(label); var input = document.createElement("input"); input.setAttribute("type", this.type); document.getElementsByTagName("body")[0].appendChild(input); var div = document.createElement("div"); document.getElementsByTagName("body")[0].appendChild(div); }, validator: function() { var that = this;var inputs = document.getElementsByTagName("input");var divs = document.getElementsByTagName("div"); inputs[3].onfocus = function() {divs[3].innerHTML = that.rules;}inputs[3].onblur = function() {var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/g;if (inputs[3].value.length == 0) {divs[3].innerHTML = that.fail1;description(inputs[3], false); } else if (reg.test(inputs[3].value)) {divs[3].innerHTML = that.success;description(inputs[3], true); } else {divs[3].innerHTML = that.fail2;description(inputs[3], false); }} }}var phoneObj = {label: '手机', type: 'text', rules: '请输入手机号码', success: '手机格式正确', fail1: '手机不能为空', fail2: '手机格式错误', producer: function() { var labelText = document.createTextNode(this.label); var label = document.createElement("label"); label.appendChild(labelText); document.getElementsByTagName("body")[0].appendChild(label); var input = document.createElement("input"); input.setAttribute("type", this.type); document.getElementsByTagName("body")[0].appendChild(input); var div = document.createElement("div"); document.getElementsByTagName("body")[0].appendChild(div); }, validator: function() { var that = this;var inputs = document.getElementsByTagName("input");var divs = document.getElementsByTagName("div"); inputs[4].onfocus = function() {divs[4].innerHTML = that.rules;}inputs[4].onblur = function() {var reg = /^\d{11}$/g;if (inputs[4].value.length == 0) {divs[4].innerHTML = that.fail1;description(inputs[4], false); } else if (reg.test(inputs[4].value)) {divs[4].innerHTML = that.success;description(inputs[4], true); } else {divs[4].innerHTML = that.fail2;description(inputs[4], false); }} }}function getLength(value) {var len = 0;for (var i = 0; i < value.length; i++) {if (value.charCodeAt(i) > 255) len += 2; else len++;}return len;}function description(input, flag) {if (flag)input.style.border = '1px solid green';else input.style.border = '1px solid red';}window.onload = function() {var inputs = document.getElementsByTagName("input");var divs = document.getElementsByTagName("div");nameObj.producer();nameObj.validator();passwordObj.producer();passwordObj.validator();confrmPasswordObj.producer();confrmPasswordObj.validator();emailObj.producer();emailObj.validator();phoneObj.producer();phoneObj.validator();var buttonText = document.createTextNode("提交"); var button = document.createElement("button"); button.style.marginLeft = "150px"; button.appendChild(buttonText); document.getElementsByTagName("body")[0].appendChild(button);document.getElementsByTagName('button')[0].onclick = function() {for (var i = 0; i < inputs.length; i++) {inputs[i].focus();inputs[i].blur();}for (var i = 0; i < divs.length; i++) {if (divs[i].style.borderColor != 'green') {alert('提交失败');return;}}alert('提交成功');}}
1 0
- IFE-TASK32(任务三十二:表单(四)实现表单自动生成工厂)
- 【ife】任务三十二:表单(四)实现表单自动生成工厂
- 表单实现表单自动生成工厂
- 【ife】任务三十一:表单(三)联动
- 【ife】任务二十九:表单(一)单个表单项的检验
- 【ife】任务三十:表单(二)多个表单项的动态校验
- 自动生成参数表单
- 自动生成表单参考
- 表单行号自动生成
- FXForms,自动生成iOS表单
- 【ife】任务十六:零基础JavaScript编码(四)
- 【ife】任务二十一:基础JavaScript练习(四)
- 【ife】任务二十五:JavaScript和树(四)
- 【ife】任务三十六:听指令的小方块(四)
- IFE耀耀学院-表单总结
- 实现表单的自动发送
- 表单(四)表单序列化
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- Echarts使用心得总结(二)
- Jquery操作复选框(CheckBox)的取值赋值实现代码
- elastalert (support_es5分支) + elasticsearch 5.1 最简单的寻找关键字报警
- oracle下scott用户的四张表(emp,dept,bonus,salgrade)的建表语句:
- mysql插入数据后返回自增ID的方法
- 【ife】任务三十二:表单(四)实现表单自动生成工厂
- Gradle for Android系列之五 多渠道打包
- S/4 HANA – 是ERP皇帝的新装,还是SAP王国的新基石
- ui-grid cannot rendered correctly when using ng-show/ng-hide, if you press F12 on the keyboard, it c
- JAVA之使用键盘输入数据
- java图片裁剪和java生成缩略图
- String的trim()方法无效的解决办法
- DynamicCocoa:滴滴 iOS 动态化方案的诞生与起航
- +-字符串