注册客户端验证问题

Never妥协 2020-04-08 06:32:53

本人前端web开发学萌一个，感觉学的好迷茫。
在下面这个程序中，js中我主要写了验证用户名1-6位中文字符、密码6-12位至少含一位字母和数字、且两次输入密码应该一致。

然后问题来了，，咋也不知道为啥就验证的时候好像就没进入js，，然后就根本没验证，这是哪里错了？这是第一个问题。

第二个问题，就是验证密码时的那个正则表达式我不太会，不知道对不对，百度找的。，如果有错误，麻烦指正。

第三个问题，就是在前端，企业从事开发的时候，如果比如要上面这个验证，那么比如像bootstrap这种框架中有没有可以直接用来验证的Js文件，还是说自己写一个验证的js比较方便？

具体代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>第一序列游戏注册</title>

<link rel="stylesheet" type="text/css" href="./frame/layui.css">

<script type="text/javascript">

function validate(){

	var username=document.form.user_name.value;

	var pass1=document.form.password1.value;

	var pass2=document.form.password2.value;

	if(!(username.length>=1&&username.length<=6))

	{

		alert("请输入1-6位中文字符用户名！");

	}

	if(pass1.length>=6&&pass1.length<=12)

	{

		var reg=new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);

		if(!reg.test(pass1){

			alert("密码中应至少包含一位数字和一位字母！");

		}

	}else{

		alert("请输入6-12位密码！");

	}

	if(!pass1.equals(pass2)){

		alert("两次密码输入不一致！");

	}

}

</script>

</head>



<body onload="document.form.user_name.focus()">

<div>

  <br/>

  <h2 style="padding:0 0 0 7em;">第一序列游戏注册</h2>

  <br/><br/>

  

  <form name="form" action="" method="post" class="layui-form" >        

    <div class="layui-form-item">

      <div class="layui-inline">

        <label class="layui-form-label">用户名</label>

        <div class="layui-input-inline" style="width: 20em;">

          <input type="text" name="user_name" lay-verify="required" placeholder="请输入不多于7位中文字符的用户名" class="layui-input">

        </div>

      </div>

    </div>

    

    <div class="layui-form-item">

      <div class="layui-inline">

        <label class="layui-form-label">密码</label>

        <div class="layui-input-inline" style="width: 20em;">

          <input type="password" name="password1" lay-verify="required" placeholder="请输入至少含有英文、数字的6位数密码" class="layui-input" >

        </div>

      </div>

    </div>

	

	<div class="layui-form-item">

      <div class="layui-inline">

        <label class="layui-form-label">确认密码</label>

        <div class="layui-input-inline" style="width: 20em;">

          <input type="password" name="password2" lay-verify="required" placeholder="请重新输入密码进行确认" class="layui-input" >

        </div>

      </div>

    </div>

                      

    <div class="layui-form-item">

      <div class="layui-input-block">

                 

		<button type="submit" class="layui-btn" onClick="validate()">提交</button>

		           

        <button type="reset" class="layui-btn layui-btn-primary">重置</button>

      </div>

    </div>

  </form>

</div>

		



		

</body>

</html>

...全文

211 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

jio可 2020-04-09

打赏
举报


<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>第一序列游戏注册</title>
  <link rel="stylesheet" type="text/css" href="./frame/layui.css">
  <script type="text/javascript">
    function validate() {
      var username = document.form.user_name.value;
      var pass1 = document.form.password1.value;
      var pass2 = document.form.password2.value;
      if (!(username.length >= 1 && username.length <= 6)) {
        alert("请输入1-6位中文字符用户名！");
        return
      }
      if (pass1.length >= 6 && pass1.length <= 12) {
        var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
        if (!reg.test(pass1)) {
          alert("密码中应至少包含一位数字和一位字母！");
          return
        }
      } else {
        alert("请输入6-12位密码！");
        return
      }
      if (pass1 !== pass2) {
        alert("两次密码输入不一致！");
        return
      }

      document.form.submit();
    }
  </script>
</head>

<body onload="document.form.user_name.focus()">
  <div>
    <br />
    <h2 style="padding:0 0 0 7em;">第一序列游戏注册</h2>
    <br /><br />

    <form name="form" action="" method="post" class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">用户名</label>
          <div class="layui-input-inline" style="width: 20em;">
            <input type="text" name="user_name" lay-verify="required" placeholder="请输入不多于7位中文字符的用户名"
              class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">密码</label>
          <div class="layui-input-inline" style="width: 20em;">
            <input type="password" name="password1" lay-verify="required" placeholder="请输入至少含有英文、数字的6位数密码"
              class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">确认密码</label>
          <div class="layui-input-inline" style="width: 20em;">
            <input type="password" name="password2" lay-verify="required" placeholder="请重新输入密码进行确认" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block" style="width: 20em;">
          <button type="button" class="layui-btn" onClick="validate()">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
</body>
</html>

Never妥协 2020-04-08

打赏
举报

引用 2 楼 jio可的回复:


	if(!reg.test(pass1)){
			alert("密码中应至少包含一位数字和一位字母！");
		}

少了右括号

哦对了，十分感谢。那第二个和第三个问题有没有什么看法呢

jio可 2020-04-08

打赏
举报


	if(!reg.test(pass1)){
			alert("密码中应至少包含一位数字和一位字母！");
		}

少了右括号

Never妥协 2020-04-08

打赏
举报

对了，我刚刚把这个传到了服务器 http://39.104.64.236/2017/yangyt/newGames/register.htm

Register.java 为客户端程序注册界面，负责用户帐号信息的注册验证与反馈。 ChatRoom.java 为客户端程序聊天室主界面，负责接收、发送聊天内容与服务器端的Connection.java 亲密合作。 Windowclose 为ChatRoom....

今天想实现一个注册、登录界面。...javascript客户端验证与server端的验证比较有一下优点：（1）反应快速，节省时间：不需要刷新网页。在server端验证需要把内容提交到server。但是客户端的验证

本课程介绍burpsuit的高级功能，在登录验证的时候，有的时候会用验证码，有的时候会用token，token是后端web服务随机生成的，每次登录的时候客户端需要携带正确的token到后端验证，否则视为无效登录，在bao破的时候...

[编者注：本文介绍了如何为Domino 4.6和4.6.1设置SSL客户机认证。] 互联网上最新的行业流行词是SSL。但是SSL真正需要提供什么？... 使用SSL 3.0验证客户端身份。有关这些SSL概念的介绍，请参见H...

1、使用HTML编写一个网上购物系统的用户注册页面，该注册页面中需要至少包含用户名，密码、真实姓名，年龄等项目，并使用js编写函数完成对表单信息的客户端验证。(要求用户名、密码、真实姓名项不有为空，密码...

CSS

61,115

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章