前端数据校验 |
您所在的位置：网站首页 › 前端表单校验库 › 前端数据校验 |
前端数据校验
|
数据校验
效果图代码注意事项
当前端做一些表单时，通常涉及到一些数据校验，比如字符长度，是否非空，两次输入数据是否一致。 这些功能完全可以通过脚本实现。 效果图
废话不多说，直接上代码。 代码 DOCTYPE html> 数据校验 function checkUserName() { //验证用户名 var fname = document.myform.username.value; var reg = /^[0-9a-zA-Z]/; if (fname.length != 0) { for (i = 0; i alert("只能输入字母或数字"); return false; } } } else { alert("请输入用户名"); document.myform.username.focus(); return false; } return true; } function passCheck() { //验证密码 var userpass = document.myform.password.value; if (userpass == "") { alert("未输入密码 \n" + "请输入密码"); document.myform.password.focus(); return false; } if (userpass.length 12) { alert("密码必须在 6-12 个字符。\n"); return false; } return true; } function passCheck2() { var p1 = document.myform.password.value; var p2 = document.myform.password2.value; if (p1 != p2) { alert("确认密码与密码输入不一致"); return false; } else { return true; } } function checkEmail() { var Email = document.getElementById("email").value; var e = Email.indexOf("@" && "."); if (Email.length != 0) { if (e > 0) { if (Email.charAt(0) == "@" && ".") { alert("符号@和符号.不能再邮件地址第一位"); return false; } else { return true; } } else { alert("电子邮件格式不正确\n" + "必须包含@符号和.符号！"); return false; } } else { alert("请输入电子邮件！"); return false; } } function checkbirthday() { //验证用户名 var year = document.myform.birthday.value; if (year 2007) { alert("年份范围从1949-2007年"); return false; } return true; } function validateform() { if (checkUserName() && passCheck() && passCheck2() && checkEmail() && checkbirthday()) return true; else return false; } function clearText() { document.myform.user.value = ""; document.myform.password.value = ""; } //显示隐藏对应的switchPwd()方法: $(function () { // 通过jqurey修改 $("#passwordeye").click(function () { let type = $("#password").attr('type') if (type === "password") { $("#password").attr("type", "text"); } else { $("#password").attr("type", "password"); } }); }); 用户名： ; 密;;;码： ; 确认密码： ; ;;;;;;;;;;;;;;;;代码很简单，一看就能看懂。 注意事项 各个数据命名要对应上。 form要记得命名，与脚本中写的要对应上， 各个输入框的id要对应好  触发条件要记得写，新加的校验条件【比如checkbirthday（）】 要加进去，否则不会生效。   常用的数据校验基本上就这些，都写在里面了，觉得用不上的，可以自行删除。 如果您觉得本文对您有所帮助，请动动您写不出bug的小手，点个赞呗~
|
【本文地址】
今日新闻 |
推荐新闻 |