表单实现表单自动生成工厂

最新推荐文章于 2024-05-21 15:10:50 发布

小允子

最新推荐文章于 2024-05-21 15:10:50 发布

阅读量3.4k

点赞数 1

分类专栏： javascript算法文章标签： css html javascript 表单

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_26297581/article/details/51329614

版权

javascript算法专栏收录该内容

6 篇文章 0 订阅

订阅专栏

index.html实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>task-32</title>
<link rel="shortcut icon" href="../img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
* {
margin: 0;
padding: 0;
}
table {
position:relative;
margin: 30px;
width: 1200px;
}
table td {
position: relative;
vertical-align: top;
padding: 5px 10px;
}
table tr td:first-child {
width: 100px;
line-height: 40px;
text-align: right;
}
table tr td+td input {
display: block;
width: 520px;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
padding-left: 10px;
}
table tr td+td input:focus {
box-shadow: 1px 1px 3px blue;
}
#submit {
padding: 10px;
position: absolute;
right: 50%;
width: 80px;
height: 40px;
color: #fff;
background-color: #2f79ba;
border: none;
border-radius: 5px;
cursor: pointer;
}
#submit:hover {
background-color: #23527b;
}
span {
color: #aaa;
font-size: 14px;
}
</style>
<script src="app.js"></script>
</head>
<body>
<div class="autoForm">
<div class="header">表单生成器</div>
<input type="checkbox" name="formList" id="nameList"><label for="nameList">名称</label>
<input type="checkbox" name="formList" id="passwordList"><label for="passwordList">密码</label>
<input type="checkbox" name="formList" id="emailList"><label for="emailList">邮箱</label>
<input type="checkbox" name="formList" id="phoneList"><label for="phoneList">手机</label>
<div class="autoStyle">
<input type="radio" name="style" id="style1" value="style1"><label for="style1">样式一</label>
<input type="radio" name="style" id="style2" value="style2"><label for="style2">样式二</label>
</div>
<input type="button" value="生成表单" id="causeForm">
</div>
<form method="post" action="">
<table id="form">
</table>
</form>
</body>
</html>

app.js代码实现

function addEvent(elem, type, func) {
//兼容浏览器差异
if (elem.addEventListener) {
elem.addEventListener(type, func);
} else if (elem.attachEvent) {
elem.attachEvent("on" + type, func);
} else {
elem["on" + type] = func;
}
}
function $(id){ //getElementById好长啊，每次写好累的。
return document.getElementById(id);
}
var check=(function(){ //将检查函数封装在这里
var nameArr=["名称不能为空","名称不能包含除中文、英文及数字以外的字符","名称长度过短","名称长度过长","名称可用"]
var passwordArr=["密码不能为空","密码不能包含除英文及数字以外的字符","密码长度过短","密码长度过长","密码可用"]
var againArr=["俩次密码不相同","请正确输入第一次密码","密码正确"];
var emailArr=["名称不能为空","邮箱格式错误","邮箱格式正确"];
var phoneArr=["手机号码不能为空","手机号码格式错误","手机号码格式正确"]
var nowPassword="";
var passwordRight=false;
function formList(name,func,rule){
this.label=name;
this.validator=func;
this.rules=rule;
}
formList.prototype.type="input";
formList.prototype.success="格式正确";
formList.prototype.fail="名称不能为空";
return {
//检查名称是否合理
checkName:function (str){
var count=0;
if(str==="")return nameArr[0];
//匹配除中文、英文及数字外的字符，i忽略大小写，[^abc]查找集合外的字符
else if(/[^0-9a-z\u4e00-\u9fa5]/i.test(str))return nameArr[1];
else {
for(var i=0;i<str.length;i++){
//如果查找的是英文及数字，则增加一个字符，如果查找的是汉字，则增加两个字符
if(/[a-z0-9]/i.test(str[i]))count++;
else count+=2;
}
if(count<4)return nameArr[2];
if(count>18)return nameArr[3];
}
return nameArr[4];
},
//检查密码输入
checkPassword:function(str){
var count=0;
passwordRight=false;
if(str==="")return passwordArr[0];
else if(/[^0-9a-z]/gi.test(str))return passwordArr[1];
else {
if(str.length<9)return passwordArr[2];
else if(str.length>24)return passwordArr[3];
else {
passwordRight=true;
nowPassword=str;
return passwordArr[4];
}
}
},
checkAgain:function(str){
if(passwordRight){
if(nowPassword===str)return againArr[2];
else return againArr[0];
}
else return againArr[1];
},
checkEmail:function(str){
if(str==="")return emailArr[0];
else if(/^[\w]+@([a-z0-9]+\.)+[a-z0-9]{2,4}$/i.test(str))return emailArr[2];
else return emailArr[1];
},
checkPhone:function(str){
if(str==="")return phoneArr[0];
else if(/^\d{11}$/.test(str))return phoneArr[2];
else return phoneArr[1];
}
}
})();
//工厂在这里
function FormList(name,type,func,rules,success){
this.label=name;
this.type=type;
this.validator=func;
this.rules=rules;
this.success=success;
};
//五个实例
var nameInput=new FormList("name","text",check.checkName,"必填，长度为4~18个字符，只允许输入中文、英文字母和数字,中文占2字符","名称可用");
var passwordInput=new FormList("password","password",check.checkPassword,"必填，长度为9~24个字符，只允许输入英文字母和数字","密码可用");
var againInput=new FormList("passwordAgain","password",check.checkAgain,"重复输入密码,俩次密码需相同","密码正确");
var emailInput=new FormList("email","text",check.checkEmail,"必填，请输入正确的邮箱地址","邮箱格式正确");
var phoneInput=new FormList("phone","text",check.checkPhone,"必填，请输入正确的手机号码","手机号码格式正确");
var labelObj={ //将英文label转化为中文
"name":"名称",
"password":"密码",
"passwordAgain":"确认密码",
"email":"电子邮箱",
"phone":"手机号码"
}
function toString(obj){
//obj.label为"name""password""passwordAgain""email""phone"
//labelObj[obj.label]为"名称""密码""确认密码""电子邮箱""手机号码"
return "<tr><td><label for=\"" + obj.label + "\">" + labelObj[obj.label] + "</label></td><td><input type=\"" + obj.type + "\" placeholder=\"请输入" + labelObj[obj.label] + "\" id=\"" + obj.label + "\" name=\"" + obj.label + "\"><span id=\"" + obj.label + "Warn\"></span></td></tr>";
}
window.οnlοad=function(){
//下面获取选项，根据选项生成表单。
var nameChose=$("nameList");
var passwordChose=$("passwordList");
var emailChose=$("emailList");
var phoneChose=$("phoneList");
var style1=$("style1");
var style2=$("style2");
var causeFormBtn=$("causeForm");
var form=$("form");
var strObj={
0:[nameInput],
1:[passwordInput,againInput],//密码与确认密码绑定
2:[emailInput],
3:[phoneInput]
}
addEvent(causeFormBtn,"click",btnCauseForm);
function btnCauseForm(){ //点击按钮生成表单
var formArr=[nameChose,passwordChose,emailChose,phoneChose];
var str="",arr=[];
for(var i=0;i<formArr.length;i++){
if(formArr[i].checked)arr.push(strObj[i]);
}
for(var j=0;j<arr.length;j++){
for(var k=0;k<arr[j].length;k++){
str+=toString(arr[j][k]);
}
}
if(style2.checked){
str=str.replace(/<input/g,"<input style='width:400px;height:50px;margin-bottom:30px;display:inline-block;margin-right:10px'");
}
str+='<tr><td></td><td><input type="button" value="提交" id="submit"></td></tr>';
form.innerHTML=str;
(function(){
var names=$("name");
var nameWarn=$("nameWarn");
var password=$("password");
var passwordWarn=$("passwordWarn");
var passwordAgain=$("passwordAgain")
var againWarn=$("passwordAgainWarn");
var email=$("email");
var emailWarn=$("emailWarn");
var phone=$("phone");
var phoneWarn=$("phoneWarn");
var submit=$("submit");
function focusIn(input,text){
text.style.color="#aaa";
input.style.borderColor="#ccc";
}
//blur()移动焦点，focus()聚焦
names&&addEvent(names,"focus",function(){
nameWarn.innerHTML="必填，长度为4~18个字符，只允许输入中文、英文字母和数字,中文占2字符";
focusIn(names,nameWarn);
});
names&&addEvent(names,"blur",function(){
nameWarn.innerHTML=check.checkName(names.value);
if(nameWarn.innerHTML=="名称可用"){
names.style.borderColor="#5fb844";
nameWarn.style.color="#5fb844";
}
else {
names.style.borderColor="#de0011";
nameWarn.style.color="#de0011";
}
});
password&&addEvent(password,"focus",function(){
passwordWarn.innerHTML="必填，长度为9~24个字符，只允许输入英文字母和数字"
focusIn(password,passwordWarn);
});
password&&addEvent(password,"blur",function(){
passwordWarn.innerHTML=check.checkPassword(password.value);
if(passwordWarn.innerHTML=="密码可用"){
password.style.borderColor="#5fb844";
passwordWarn.style.color="#5fb844";
}
else {
password.style.borderColor="#de0011";
passwordWarn.style.color="#de0011";
}
});
passwordAgain&&addEvent(passwordAgain,"focus",function(){
againWarn.innerHTML="请再次输入密码";
focusIn(passwordAgain,againWarn);
});
passwordAgain&&addEvent(passwordAgain,"blur",function(){
againWarn.innerHTML=check.checkAgain(passwordAgain.value);
if(againWarn.innerHTML=="密码正确"){
passwordAgain.style.borderColor="#5fb844";
againWarn.style.color="#5fb844";
}
else {
passwordAgain.style.borderColor="#de0011";
againWarn.style.color="#de0011";
}
});
email&&addEvent(email,"focus",function(){
emailWarn.innerHTML="必填，请输入正确的邮箱地址";
focusIn(email,emailWarn);
});
email&&addEvent(email,"blur",function(){
emailWarn.innerHTML=check.checkEmail(email.value);
if(emailWarn.innerHTML=="邮箱格式正确"){
email.style.borderColor="#5fb844";
emailWarn.style.color="#5fb844";
}
else {
email.style.borderColor="#de0011";
emailWarn.style.color="#de0011";
}
});
phone&&addEvent(phone,"focus",function(){
phoneWarn.innerHTML="必填，请输入正确的手机号码";
focusIn(phone,phoneWarn);
});
phone&&addEvent(phone,"blur",function(){
phoneWarn.innerHTML=check.checkPhone(phone.value);
if(phoneWarn.innerHTML=="手机号码格式正确"){
phone.style.borderColor="#5fb844";
phoneWarn.style.color="#5fb844";
}
else {
phone.style.borderColor="#de0011";
phoneWarn.style.color="#de0011";
}
});
addEvent(submit,"click",function(){
if((!names||names.style.borderColor=="rgb(95, 184, 68)")&&(!password||password.style.borderColor=="rgb(95, 184, 68)")&&(!passwordAgain||passwordAgain.style.borderColor=="rgb(95, 184, 68)")&&(!email||email.style.borderColor=="rgb(95, 184, 68)")&&(!phone||phone.style.borderColor=="rgb(95, 184, 68)")){
alert("提交成功");
}
else alert("输入有误");
})
})();
}
}

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单实现表单自动生成工厂

index.html实现代码task-32 * {margin: 0;padding: 0;}table {position:relative;margin: 30px;width: 1200px;}table td {position: relative;vertical-align: top;paddin
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。