• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 介绍JavaScript正则实现表达式以字母开头

介绍JavaScript正则实现表达式以字母开头

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了JavaScript正则,正则表达式,以字母开头等相关知识,希望对您有所帮助

表单校验:创建表单,使用JavaScript+dom为表单添加校验.

要求:

验证用户名称,必须以字母开头,长度2-6位之间;

验证密码不能为空;

确认密码不能为空,要与密码一致;


6033487192b73.png

6033488dd6598.png


<!DOCTYPE html><html><!-- 表单校验:创建表单,使用JavaScript为表单添加校验.    1.验证用户名称,必须以字母开头,长度2-6位之间.    2.验证密码不能为空.    3.确认密码不能为空,要与密码一致. --><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript">    function checkForm() {        //获得用户名对象        var username = document.getElementById("username");                //---获得用户名输入框中的value值        var usernamevalue = username.value;        var Reg = /^[a-zA-Z][-_a-zA-Z0-9]{1,5}/; // JavaScript中的正则与Java的正则略有不同        if (usernamevalue.length >= 2 && usernamevalue.length <= 6 && Reg.test(usernamevalue)) {            //为span设置提示语            document.getElementById("usernameSpan").innerHTML = "<font color='green'> 用户名可用<font>";        } else {            document.getElementById("usernameSpan").innerHTML = "<font color='red'> 用户名必须以字母开头且长度在2-6之间<font>";        }                //获得密码value        var password = document.getElementById("password").value;        if (password == "") {            document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空</font>";        } else {            document.getElementById("passwordSpan").innerHTML = "<font color='green'>密码可用</font>";        }                //获得确认密码        var repassword = document.getElementById("repassword").value;         if (repassword == password) {            document.getElementById("repasswordSpan").innerHTML = "<font color='green'>输入一致</font>";        } else {            document.getElementById("repasswordSpan").innerHTML = "<font color='red'>两次输入密码不一致</font>";        }    }    </script></head><body>    <h2>新用户注册</h2>    <p style="border: 1px solid sandybrown; width: 300px; height: 260px;">        <form action="">            <table cellspacing="15">                <tr>                    <td>用户名称:</td>                    <td>                        <input type="text" id="username">                        <span id="usernameSpan"></span>                    </td>                </tr>                <tr>                    <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp码:</td>                    <td>                        <input type="password" id="password">                        <span id="passwordSpan"></span>                    </td>                </tr>                <tr>                    <td>确认密码:</td>                    <td>                        <input type="password" id="repassword">                        <span id="repasswordSpan"></span>                    </td>                </tr>            </table>        </form>    </p>    <input type="button" value="确认注册" onclick="checkForm()" /></body></html>



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 介绍JavaScript正则实现表达式以字母开头

相关文章

  • 2022-04-29WordPress建站教程,纯代码实现wordpress防止发布文章出现标题重复,自动检测重复标题文章
  • 2022-04-29Laravel如何使用Observer实现日志管理模块
  • 2022-04-29如何解决mysql 错误1053问题
  • 2022-04-29CSS如何实现元素不随滚动条滚动
  • 2022-04-29Node.js中async的用法是什么
  • 2022-04-29Photoshop打造超酷的火焰图形
  • 2022-04-29vue.js路由this.route.push跳转页面不刷新怎么办
  • 2022-04-29解决linux下mysql启动失败的问题
  • 2022-04-29PHP中如何利用define定义常量
  • 2022-04-29PS打造飘起来的房子‘飞屋环游记’合成教程

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • wordpress怎么添加自定义按钮并导出csv
    • 如何用php程序实现网页换肤
    • JavaScript 如何实现横向瀑布流
    • PS制作质感的立体字
    • Laravel使用intervention image包上传、剪裁图片
    • 聊聊小程序怎么实现“全文收起”功能
    • dedecms大量删除文章后,列表页显示错误修复办法
    • 怎么在swarm集群里通过service部署wordpress
    • 四种方式快速实现上拉触底加载效果
    • PhotoShop制作抽象背景立体3D字效果教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有