JS表单验证案例（基础版）
JS表单验证案例（基础版）
-
首先进行表单的创建
验证时将后台设为# 将post方式变为get方式 设置一个总的检验函数在表单提交进行总校验
-
表单与表格的嵌套
用户注册页面 八行 两列 第一列进行合并（cosplay来进行合并） 用来放置标题
用户名的校验
用户名： 定义一个空的span块 用来显示错误提示
用 oninput 来检测输入用户名的格式 边检测边输入 也可以使用onblur 输入完成后再进行判断检测验证
调用checkUsername()函数进行检测
function checkUsername() {var c = document.getElementById("xxx").value;var regx = /^[a-zA-Z]{6,16}$/; var f = regx.test(c);var cc = document.getElementById("ccc");if (f) {cc.innerHTML = "用户名规则正确✔"} else {cc.innerHTML = "用户名格式错误"}return f; }通过document.getElementById来获取用户名的value值 (注意 这样返回的结果是String类型)
然后定义用户名的正则表达式 然后与用户名的value值进行匹配
匹配正确 空的span块输出 用户名规则正确✔
匹配错误 空的span块输出 用户名格式错误
再次 return 比较结果
-
密码与确认密码的检验
密码： 确认密码： 密码检验的过程与用户名检验的过程类似 正则中额外添加数字 作为密码的正确格式
确认密码时 通过获取两者的value 进行比较 根据结果 在空的块中显示结果提示
-
性别与爱好的选择提示
性别： 男 女 爱好： 跑步 没什么爱好 有很多爱好 性别用单选框radio （注意 radio的name必须一致 否则 无法达到单选的效果）
使用onmouseleave来进行选择检测
为此我们定义两个div块 来达到检测到未选择则选项 而鼠标离开此块 就进行选择结果的提示
function checkhhh() { var caocaox = document.getElementById("caox"); if (document.getElementById("y1").checked == false && document.getElementById("y2").checked == false) {caocaox.innerHTML = "请勾选您的性别"} else {caocaox.innerHTML = "性别已勾选"} return !(document.getElementById("y1").checked==false &&document.getElementById("y2").checked == false);} function checkeee() {var caocao = document.getElementById("cao");if (document.getElementById("u1").checked == false && document.getElementById("u2").checked == false && document.getElementById("u3").checked == false) {caocao.innerHTML = "请至少勾选一项兴趣爱好"} else {caocao.innerHTML = "爱好已勾选"} return !(document.getElementById("u1").checked == false &&document.getElementById("u2").checked == false && document.getElementById("u3").checked == false);}在进行性别勾选检测时 用document.getElementById来获取性别选项的checked属性
当且仅当两个性别选项全部为false 也就是两个选项都未选择的时候 我们会弹出未勾选提示
注意 在这里由于我们的条件是两者都未选择
因此这两个函数的返回值与其余检测项的返回值不同的是 这里我们返回的是条件的取反值
兴趣爱好与性别类似 不做赘述
-
个人描述字数的检测
个人描述： 检测方式一样 oninput 边输入边检测
function checkMiaoshu() {var c4 = document.getElementById("miaoshu").value;c4 = c4.trim();var cc3 = document.getElementById("miaoshu1");if (c4.length > 5) {cc3.innerHTML = "个人描述合格✔"} else {cc3.innerHTML = "个人描述字数小于五十字"}return c4.length > 5;}
获取value值 trim去除空格 检测获取的长度 根据要求弹出提示-
提交与重置
这里有一个别忽略的是 表单开始时我们定义了一个提交时检测所有的checkall函数
function checkAll() { return checkUsername() && checkPassord() && checkPassord1() && checkhhh() && checkeee() && checkMiaoshu();}
再次检测后 无不合格要求的进行提交 交给后台
至此 JS语言的表单简单验证结束本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
