js 逐步教实现表单系统 (html 逻辑 css 逻辑 js 逻辑)
发布于: 2021 年 03 月 22 日
html 部分:
<div class="container"> <form action=" " class="form" id="form"> <h1>注册</h1> <div class="form-control"> <label for="username">用户名</label> <input type="text" id="username" name="username" placeholder="请输入用户名"> <small>错误提示</small> </div> <div class="form-control"> <label for="email">邮箱</label> <input type="text" id="email" name="email" placeholder="请输入邮箱"> <small>错误提示</small> </div> <div class="form-control"> <label for="password">密码</label> <input type="text" id="password" name="password" placeholder="请输入密码"> <small>错误提示</small> </div> <div class="form-control"> <label for="password2">确认密码</label> <input type="password" id="password2" name="password2" placeholder="请输入确认密码"> <small>错误提示</small> </div> <button>提交</button> </form> </div>复制代码
图片展示:
注意一下:要写对哦.
ｃｓｓ部分：
:root { --success-color:#2ecc71; --error-color:#e74c3c; } *{padding: 0px;margin: 0px;} body { background-color: #f9fafb; font-family: sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .container { background-color: #fff; border-radius: 5px; box-shadow: 0 20px 10px rgba(0,0,0,0.3); width: 400px; } h1 { text-align: center; margin: 0 0 20px; } .form { padding: 30px 40px; } .form-control { margin-bottom: 10px; padding-bottom: 20px; position: relative; } .form-control label { color: #777; display: block; margin-bottom: 5px; } .form-control input { width: 100%; border: 2px solid #f0f0f0; border-radius: 4px; display: block; font-size: 14px; padding: 10px;
} .form-control input:focus { border-color: #777; outline: 0; } .form-control.success input { border-color: var(--success-color); } .form-control.error input { border-color: var(--error-color);}.form-control small { color: var(--error-color); position: absolute; bottom: 0; left: 0; visibility: hidden;}.form-control.error small { visibility: visible;}.form button { cursor: pointer; background-color: #3498db; border: 2px solid #3498db; border-radius: 4px; color: #fff; display: block; font-size: 16px; padding: 10px; margin-top: 20px; width: 100%; }复制代码
图片展示：
注意一下：
ｃｓｓ变量：格式：
他是一个选择器．
定义变量：
--success-color:#2ecc71;复制代码
使用变量：
border-color: var(--success-color);复制代码
ｊｓ逻辑：
const form = document.getElementById("form"); const username = document.getElementById("username"); const email = document.getElementById("email"); const password = document.getElementById("password"); const password2 = document.getElementById("password2"); //第一:先看看是否是按下了button,如果是就先去取消默认的事件,然后再 form.addEventListener("submit",function(e) { e.preventDefault(); //第二:再看看提交之前填写了吗? checkRequired([username,email,password,password2]); checkLength(username,3,15); checkLength(password,6,12); checkEmail(email); checkPasswordsMatch(password, password2); }); function checkRequired(inputArr) { inputArr.forEach(function(input)//遍历这些表单看看哪一个没写 { if(input.value.trim()==="")//去除了空格,如果没值的话就 { showError(input,`${getKeyWords(input)}为必填项`); } else { showSuccess(input); } }); } function getKeyWords(input) { return input.placeholder.slice(3); } function showError(input,message) { const formControl=input.parentElement; formControl.className="form-control error"; const small=formControl.querySelector("small"); small.innerText=message; } function showSuccess(input) { const formControl=input.parentElement; formControl.className="form-control success"; } function checkLength(input,min,max) { if(input.value.length<min) { showError(input,`${getKeyWords(input)}至少${min}个字符`); } else if(input.value.length>max) { showError(input,`${getKeyWords(input)}少于${max}个字符`); } else { showSuccess(input); } } function checkEmail(input) { const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;//匹配规则 if(re.test(input.value.trim())) { showSuccess(input); } else { showError(input,"邮箱格式错误"); } } function checkPasswordsMatch(input1,input2) { if(input1.value!==input2.value) { showError(input2, "密码不匹配"); } }复制代码
图片展示：
第一步：先获取东西．
const form = document.getElementById("form"); const username = document.getElementById("username"); const email = document.getElementById("email"); const password = document.getElementById("password"); const password2 = document.getElementById("password2");复制代码
第二步：
当提交的情况下要做什么功能：
form.addEventListener("submit",function(e) { e.preventDefault(); checkRequired([username,email,password,password2]); checkLength(username,3,15); checkLength(password,6,12); checkEmail(email); checkPasswordsMatch(password, password2); });复制代码
注意一下；第一：取消系统默认的事件，
最重要的一点在于是否每一个都填了．
所以：
function checkRequired(inputArr) { inputArr.forEach(function(input) { if(input.value.trim()==="") { showError(input,`${getKeyWords(input)}为必填项`); } else { showSuccess(input); } }); }复制代码
注意一下；这个函数的功能是；看看是否每一个ｉｎｐｕｔ都填啦。
function getKeyWords(input) { return input.placeholder.slice(3); }复制代码
这个函数的功能是去掉请输入三个字．
function showError(input,message) { const formControl=input.parentElement; formControl.className="form-control error"; const small=formControl.querySelector("small"); small.innerText=message; }复制代码
这个函数的功能是；错误啦就显示红色边框与字．
例如：
function showSuccess(input) { const formControl=input.parentElement; formControl.className="form-control success"; }复制代码
这个函数的功能是对啦就显示对的蓝色边框就行了．
例如：
function checkLength(input,min,max) { if(input.value.length<min) { showError(input,`${getKeyWords(input)}至少${min}个字符`); } else if(input.value.length>max) { showError(input,`${getKeyWords(input)}少于${max}个字符`); } else { showSuccess(input); } }复制代码
这个函数的功能是；用来看看用户名和密码缺少多少字符．或者说多了．按照下面的标准．
function checkEmail(input) { const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;//匹配规则 if(re.test(input.value.trim())) { showSuccess(input); } else { showError(input,"邮箱格式错误"); } }复制代码
这个函数的功能是看看邮箱的格式对或者不对，
function checkPasswordsMatch(input1,input2) { if(input1.value!==input2.value) { showError(input2, "密码不匹配"); } }复制代码
这个函数的功能是；看看两次输入的密码是否都一样。
划线
评论
复制
发布于: 2021 年 03 月 22 日阅读数: 7
版权声明: 本文为 InfoQ 作者【贵哥的编程大路】的原创文章。
原文链接:【http://xie.infoq.cn/article/14dacf5a5c9b9654f7f8eede8】。未经作者许可，禁止转载。
贵哥的编程大路
关注
不成就忍耐到成。我没有什么本事，只会忍耐 2020.10.03 加入
还未添加个人简介
评论