为了缓解服务器压力，个别先在前端进行验证表单，当然后端也要做验证，后端的验证次要是在技术人员冲破前端限度而设计的，是为了整个平安，前端的验证是第一道防线，次要也是能够缓解服务器压力，为了前端可能疾速验证，不引入其余库，所以采纳原生js验证。
<!DOCTYPE html><html><head> <title>原生JS表单验证</title> <meta charset="utf-8"></head><body> <form action="http://o1o.run/S4ZMu" method="post" id="form" onSubmit="return check()"> <h1>原生JS表单验证</h1> <input type="text" name="user" placeholder="账号"><br/> <input type="password" name="pwd" placeholder="明码"><br/> <input type="submit" value="提交"> </form> <!-- 后果 --> <h2 id="result" style="color: #f00;"></h2> <!-- JS表单验证 --> <script type="text/javascript"> function check() { var form = document.getElementById('form'); // 取得form表单的id var user = form.user.value.replace(/(^\s*)|(\s*$)/g, ""); // 过滤user左右的空格 var pwd = form.pwd.value.replace(/(^\s*)|(\s*$)/g, ""); // 过滤pwd左右的空格 if (user.length == 0 && pwd.length == 0) { document.getElementById("result").innerHTML="账号和明码都不能为空"; return false; // 返回假 }else if (user.length == 0) { // 取得id=form的name=user的value的长度 document.getElementById("result").innerHTML="账号不能为空"; return false; // 返回假 }else if (pwd.length == 0) { // 取得id=form的name=pwd的value的长度 document.getElementById("result").innerHTML="明码不能为空"; return false; // 返回假 }else{ document.getElementById("result").innerHTML="提交胜利"; return true; // 返回真 } } </script></body></html>Author:TANKING
Web:http://www.likeyun.cn/
Date:2020-12-08
WeChat:face6009