表单验证制作注册页面

<body>
  <form action="好友列表.html" method="get">
    <div>
      用户名:<input type="text" name="name" id="name" />
    </div>
    <div>
      密码:<input type="text" name="mima1" id="mima1" />
    </div>
    <div>
      确认密码:<input type="text" name="mima2" id="mima2" />
    </div>
    <div>
      邮箱:<input type="text" name="email" id="email" />
    </div>
    <div>
      <input type="submit" value="注册" onclick="return check()" />
    </div>
  </form>
</body>
<script type="text/javascript">
  var n = document.getElementById("name");
  var m1 = document.getElementById("mima1");
  var m2 = document.getElementById("mima2");
  var e = document.getElementById("email");

  function check(){
    if(n.value==""){
        alert("用户名不能为空");
        return false;
    }

    if(m1.value!=m2.value){
        alert("两次输入的密码不相同!");
        return false;
    }

    var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if(email.value.match(e)==null){
        alert("邮箱输入不正确!");
        return false;
    }
  }

</script>

在标签中onclick属性上加入“return”,表示返回值。在JS内如果写“return false”,代表阻止提交;将“false”换成“true”,就表示可以提交。
时间: 2024-08-29 21:28:02

表单验证制作注册页面的相关文章

tipsText表单验证(注册)

注册表单验证脚本 <script src="/assets/skins/js/jquery-1.11.2.min.js"></script> <script src="/scripts/jquery/jquery.form.min.js" type="text/javascript"></script> <script src="/scripts/jquery/Validform_v

一款基于jQuery的带Tooltip表单验证的注册表单

今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQuery表单实现非常简单,使用起来相对比较轻巧. 在线预览   源码下载 这款插件js要引用jquery.js库,还有一个easyform.js 库. html代码部分如下: <div class="form-div"> <form id="reg-form&q

HTML + CSS + JavaScript 实现注册页面信息验证(表单验证)

要求 创建一个注册页面,如下图. 然后再对注册信息进行判断,判断其是否符合要求.(如:密码6-16位字符,不能有空格等) 图片素材如下: 注册页面的整个框架 注册页面框架分析 页面内容主要分为三个部分: 我们可以使用三个块标签,可以将这三个部分分别放到每个块标签中. 注册页面框架的实现 第一部分:两个段落文本 <!-- 左边部分 --> <div class="rg_left"> <p>新用户注册</p> <p>USER RE

jQuery/javascript实现网页注册的表单验证

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <script src="jquery.js"></script> 6 <style type="text/css"> 7 table{background-color:pink;width:80%;height:3

Java学习总计(二十六)——JavaScript正则表达式,Js表单验证,原生js+css页面时钟

一.JavaScript正则表达式1.exec检索字符串中指定的值,返回找到的值,并确定其位置2.test检索字符串中指定的值,返回true或false3.正则表达式对象的创建:(1)方式一:Var rgex=new RegExp("[0-9]","模式");(2)方式二:简便写法,用双斜杠//把正则表达式的内容括起来例1(正则创建,使用test()方法): <!DOCTYPE html> <html> <head> <me

2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"

简单的注册模块表单验证处理

一个注册框  进行表单验证处理 如图 有简单的验证提示功能 具体可以  查看演示 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 1 <style type="text/css"> 2 body{margin:0;padding: 0;} 3 .login{posi

最简单的表单验证

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最简单表单验证</title> 6 <style> 7 form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-sh

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百