js前端表单校验

最新推荐文章于 2021-12-05 17:28:40 发布
最新推荐文章于 2021-12-05 17:28:40 发布
阅读量204 收藏
点赞数
文章标签： javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43777157/article/details/106288670
版权

前端练习

实现页面展示

页面展示

以下是实现代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
    
    <script src="regist_check.js" type="application/javascript"></script>
    <!-- <script type="text/javascript" src="My97DatePicker/jb51.net/My97DatePicker/WdatePicker.js"></script> -->
    <style>
        table,tr,th,td{ border: 0ex solid gray;border-collapse:collapse; }
    </style>

</head>

<body>
    <center>
    <fieldset style="width: 450px;">
        
        <legend align="center">用户注册</legend>
        
        <form action="regist_success.html" method="POST" onsubmit="return checkAll()">
            <table style="width: 450px;">
            <tr>
                <td style="text-align: left;">用户名:</td>
                <td style="text-align: left;">
                    <input id="username" type="text" maxlength="18" style="width: 150px;" size="10s" onblur="checkUserName()" onfocus="promptUsername()">
                    <span id="message"></span>
                </td>
            </tr>
            <tr>
                <td>用户密码:</td>
                <td style="text-align: left;">
                    <input id="password" type="password" maxlength="16" style="width: 150px;" onblur="checkPassword()">
                    <span id="messagePwd"></span>
                </td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td style="text-align: left;">
                    <input id="password2" type="password" maxlength="16" style="width: 150px;" onblur="checkPwdConfirm()">
                    <span id="messagePwdComfim"></span>
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    <input type="radio" name="sex" checked> 男 &nbsp;&nbsp;
                    <input type="radio" name="sex"> 女
                </td>
            </tr>
            <!-- <tr>
                <td>年龄:</td>
                <td style="text-align: left;">
                    <input type="text" class="Wdate" maxlength="3" style="width: 150px;" onFocus="WdatePicker({lang:'zh-cn',maxDate:'%y-%M-#{%d}',readOnly:true})" id="age" οnblur="checkAge()">
                    <span id="messageAge"></span>
                </td>
            </tr> -->
            <tr>
                <td>年龄:</td>
                <td style="text-align: left;">
                    <input type="text" maxlength="3" style="width: 150px;" id="age" onblur="checkAge()">
                    <span id="messageAge"></span>
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td style="text-align: left;">
                    <input id="email" type="email" style="width: 150px;" onfocus="promptEmail()" onblur="checkEmail()">
                    <span id="messageEmail"></span>
                </td>
            </tr>
            <tr>
                <td>兴趣爱好:</td>
                <td style="text-align: left;">
                    <input type="checkbox"> 健身 
                    <input type="checkbox"> 骑单车
                    <input type="checkbox"> 慢跑
                    <input type="checkbox"> K歌
                </td>
            </tr>
            <tr><td rowspan="5"> 个人简介:</td><td rowspan="5">
                <textarea rows="5" cols="25" ></textarea>
            </td></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr><td> 用户头像：</td><td>
                <input type="file">
            </td></tr>
            
            <tfoot>
                <tr><th colspan="2"><input type="submit" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重置"></th></tr>
            </tfoot>

             
            </table>
        </form>
        
    </fieldset>
    </center>
</body>
</html>

function promptUsername(){
    var username=document.getElementById("username");
    username.value="请输入用户名";
}
function promptEmail(){
    var email=document.getElementById("email");
    email.value="请输入正确邮箱";
}
function checkUserName(){
    var username = document.getElementById("username").value;
    var message = document.getElementById("message");
    // alert(username);
    if(username.trim().length<6 || username.trim().length>18){
        message.innerHTML = "<span style='color: red;'>用户名长度必须6~18位</span>";
        return false;
    }else if(!isNaN(username)){
        message.innerHTML = "<span style='color: red;'>用户名不能都是数字组成</span>";
        return false;
    }
    else{
        message.innerHTML = "<span style='color: green;'>√</span>";
        return true;
    }
}
function checkPassword(){
    var password = document.getElementById("password").value;
    var messagePwd = document.getElementById("messagePwd");
    if(password.trim().length<6 || password.trim().length>18){
        messagePwd.innerHTML = "<span style='color: red;'>用户名长度必须6~18位</span>";
        return false;
    }else if(!isNaN(password)){
        messagePwd.innerHTML = "<span style='color: red;'>用户密码不能都是数字组成</span>";
        return false;
    }
    else if((/^[a-zA-Z]+$/).test(password)){
        messagePwd.innerHTML = "<span style='color: red;'>用户密码不能都是字母组成</span>";
        return false;
    }
    else{
        messagePwd.innerHTML = "<span style='color: green;'>√</span>";
        return true;
    }
}
function checkPwdConfirm(){
    var password2 = document.getElementById("password2").value;
    var messagePwdComfim = document.getElementById("messagePwdComfim");
    if(password2 != document.getElementById("password").value){
        messagePwdComfim.innerHTML = "<span style='color: red;'>用户密码不匹配</span>";
        return false;
    }else{
        messagePwdComfim.innerHTML = "<span style='color: green;'>√</span>";
        return true;
    }
}
function checkAge(){
    var age = document.getElementById("age").value;
    var messageAge = document.getElementById("messageAge");
    if(isNaN(age)){
        messageAge.innerHTML = "<span style='color: red;'>年龄只能是数字组成</span>";
        return false;
    }else if(age==""){
        messageAge.innerHTML = "<span style='color: red;'>年龄必须填写</span>";
        return false;
    }else if(age>60 || age<18){
        messageAge.innerHTML = "<span style='color: red;'>年龄只能在18~60岁之间</span>";
        return false;
    }
    else{
        messageAge.innerHTML = "<span style='color: green;'>√</span>";
        return true;
    }
}
function checkEmail(){
    var email = document.getElementById("email").value;
    var messageEmail = document.getElementById("messageEmail");
    if((/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/).test(email)){
        messageEmail.innerHTML = "<span style='color: green;'>√</span>";
        return true;
    }else{
        messageEmail.innerHTML = "<span style='color: red;'>邮箱格式不正确</span>";
        return false;
    }
}
function checkAll(){
    if(checkEmail() && checkPassword() && checkPwdConfirm() && checkUserName() && checkAge()){
        return true;
    }
    return false;
}
Milena516
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js实现表单前端校验
三个和尚_的博客
12-08 1230
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;注册页面&amp;lt;/title&amp;gt; &amp;lt;script&amp
前端表单验证的js文件
12-05
自己写的一个表单验证，特别省事，也容易操作，要是不会我还可以指导一下，这个表单是实时触发，可以调节成按钮触发，关于文件使用在我的博客里面有 地址：https://blog.csdn.net/liqun_super/article/details/84838256
js 前端表单验证
小羽向前跑
02-26 1375
最终效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表单验证&lt;/title&gt; &lt;style type="text/css"&gt;
Web前端 | 注册表单验证
ZY-JIMMY
05-08 2万+
注册格式要求：   页面中所有项均为必填项 登录账号：只能是数字或字母且以字母开头 密码：大于8位且需要有字母和数字之外的字符 姓名：格式为2-4个汉字 出生年月日：格式为yyyy-mm-dd 【eg：1998-02-17】 邮编：正确的6位数字邮编 E-mail：基本格式 Html程序代码如下(页面程序，封装在index.html中)： &lt;!DOCTYPE html&...
原生JS经典小项目-form表单校验
05-18
通过这个原生JS的小项目，你可以深入理解表单校验的原理，掌握如何使用JavaScript实现高效且友好的表单验证机制。这不仅提高了网页应用的安全性，还能提升用户的操作体验。在实际开发中，这样的技能是必不可少的。
jq 表单校验工具
01-10
"jq 表单校验工具"是一个专门用于JavaScript（js）和jQuery（jq）环境的插件，它提供了强大的功能来帮助开发者实现对表单输入的实时验证。 首先，我们来看一下这个工具的核心功能。"传参"意味着你可以向校验方法...
vue+element实现表单校验功能
10-16
在Vue.js框架中，结合Element UI库开发前端应用时，表单校验是一个常见的需求，用于确保用户输入的数据满足特定的格式和规范。Vue+Element的表单校验功能提供了便利且灵活的方法来验证用户输入，减少错误并提高用户...
JavaScript 完成注册页面表单校验的实例
10-19
本实例主要介绍如何使用JavaScript来完成一个注册页面的表单校验。 首先，我们需要了解表单验证的基本流程： 1. **确定事件(onsubmit)**: 在HTML的标签中，我们可以设置`onsubmit`事件监听器，当用户尝试提交表单...
js javaScript 验证校验小工具包
02-25
这个"js javaScript 验证校验小工具包"显然是一个集合了各种JavaScript验证和校验功能的资源库，旨在帮助开发者更方便地处理表单验证、数据格式检查等常见任务。 在前端开发中，验证和校验通常涉及以下几个方面： ...
form表单提交，前端验证
热门推荐
雨林峰的博客
04-30 5万+
Form表单提交，js验证 1, Onclick() 2, Onsubmit() Button标签 input (属性 submit button )标签 Input type=button 定义按钮，没有任何行为。多数情况下，用于通过javascript启动脚本 Input type=submit 定义提交按钮，提交按钮会把表单数据发送到服务器 在javascri...
使用JS实现表单验证
星海IT学习之路
07-02 1万+
目录表单页面展示FormCheck.jspCSS样式Register.cssJavaScript代码FormCheck.js 以注册页面为例实现表单验证功能。 表单页面展示 FormCheck.jsp <!DOCTYPE html> < html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面表单校验</title> <link rel="st
简单的前端表单的校验
dashao6757的博客
04-17 149
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function checkForm(){ //获取用户名及其内容 var usernameOb...
前端开发，JavaScript 常见表单正则校验方法
MaybyYouLove的博客
12-05 470
// 输入邮箱去空格 toTrimMail(userMail,eDom){ var that = this; that.parms.email =(userMail && userMail.replace(/s+/g,"")); $('.J email').val(that.parms.email); that.changelnputValid(1.eDom); } //校验手机号 validPhoneNumber(userPhone) { var that = this,ret
使用js完成前端注册表单校验
MZA666的博客
11-14 687
注册分前端和后台校验,一个完整的系统校验两者不可或缺. javaScript分为三部分 ①ECMAScript:javaScript的核心, ②DOM: 文档对象模型 (包含整个html的内容) ③BOM: 浏览器对象模型 (包含整个浏览器相关内容) 与java的区别: 1.变量是弱类型的,使用 var 定义 2.分号可有可无,建议保留. ECMAScript也有关键字,编写代码的...
前端校验
weixin_45945882的博客
03-04 213
前端校验 1、form 标签添加属性οnsubmit=“return checkInfo()” 2、input标签后添加标签 3、var zz=/1{4,8}$/ ^开头美元符号结尾 ​ {}匹配的次数 *是大于等于零次 ?是0或1次 +号是大于等于一次 4、zz(test(写value值)) 5、正常返回flag和写入message document.getElementById(“...
【JS学习总结】使用JS实现前端的表单校验
ghscarecrow的博客
08-20 317
前言：这个系列主要是对之前学习JavaScript实现的一些小demo的总结，总觉得不能这样学过了就算了，趁着假期就好好总结一下吧。 在平常的web开发中，我们常常会接触到实现注册功能，在注册的时候我们要防止用户输入一些不规范的内容，所以我们一般要对表单进行校验，校验又分为前端校验和后端校验。这里这涉及到前端校验。那么，我们怎么来使用JS代码来实现前端校验并在用户输入不规范的时候给用户显示提示信...
Web安全——前端JS表单验证过滤
weixin_33878457的博客
05-02 420
前言 之前忙于做各种事情，已经很久没写过文章，最近接的一个学校的网站项目，近期被人用自动脚本攻破了（笑...），因为我们第一次做这种上线的项目，完全没有意识到一些web安全的知识，所以就开始了紧急的漏洞补救和防护措施。所以我就把近期学习的知识总结下。目前我水平有限，只能做一个初级认识，让一些刚入行做上线的实际项目的同学能有所警惕。 原因...
[js]前端表单验证
毛台
10-26 455
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="post"> <p>name: <input type="text" id="name"> <span id="name_err"></spa
前端表单自定义校验时间
最新发布
09-22
前端表单的自定义校验是通过定义验证规则和校验函数来实现的。在Vue.js和element-ui中，可以使用validator属性来定义验证规则，并通过校验函数来判断是否通过验证。以下是实现前端表单自定义校验的一般步骤： 1. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值