首页 / JQUERY / 前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器

前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1224字，纯文字阅读大概需要2分钟。

内容图文

表单校验与正则表达式

JQuery系列至此完结撒花~~

表单校验

前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器 - 文章图片
submit()的返回值会决定表单是否真正提交，如果 返回值是true则提交，false则不提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myForm").submit(function(){
                var $uname = $("#username").val();
                var $uPassword = $("#password").val();
                if( $uname.length < 2 || $uname.length >= 6 ) {
                    alert("用户名长度必须是2~ 6");
                    return false;
                }
                if( $uPassword.length <=  6 ) {
                    alert("密码长度必须大于6位");
                    return false;
                }
                return true;

            });


        });

    </script>

</head>
<body>
        <form id = "myForm"  action="index.html">
            用户名:<input id="username"><br>
            密码：<input id = "password" type="password" ><br>
            <button type="submit">提交</button>
        </form>
</body>
</html>

前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器 - 文章图片

正则表达式

前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器 - 文章图片
常见校验规则

手机号码校验

/^1[0-9]{10}$/

邮箱格式形如
123_hello@163.com
hello@sina.com.cn

/^\w+@[a-zA-Z0-9]{2,4}\.[a-zA-Z]{2,3} (\.[a-zA-Z]{2,3} )? $/

提示语可以使用标签显示

例如

<!-- 将font标签隐藏起来-->
<font style="display:none" id ="tipFont">邮箱有误</font>  
<!-- 校验错误时 在设置其display的属性值为inline或者block -->
$("#tipFont").css("display","inline");

表单选择器

前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器 - 文章图片
前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器 - 文章图片

内容总结

以上是互联网集市为您收集整理的前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器全部内容，希望文章能够帮你解决前端笔记 —— JQuery（四）表单校验、正则表达式、表单选择器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1041865.html

来源：【匿名】