表单提交,js验证

最新推荐文章于 2021-11-04 15:42:31 发布
最新推荐文章于 2021-11-04 15:42:31 发布
阅读量731 收藏
点赞数
分类专栏： 前端-javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40292626/article/details/81836742
版权

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>表单提交</title>
<style>
.item span{
    color:red;
    font-size:12px;
    margin-left:20px;
    
}
</style>
</head>
<body>
    <div style='width:600px;height:500px;margin:0 auto;border:1px solid red;'>
        <form id="theform" action='' method='post'  οnsubmit="return checktable();">
        <div class='item'>
            <label>姓名:</label> <input type='text' name='username' id='username'/>
            <span name='namealert'id='namealert'></span>
        </div>
        <div class='item'>
            <label>年龄</label> <input type='text' name='age' id='age'/>
            <span id='agealert'></span>
        </div>
        <div class='item'>
            <label>性别:</label>
            <input type='radio' name='sex' value='男' checked/>男
            <input type='radio' name='sex' value='女'/>女
        </div>
        <div class='item'>
            <label>密码</label>
            <input type='password' name='pwd' id='pwd'/>
            <span id='pwdalert'></span>
        </div>
        <div class='item'>
            <label>确认密码</label>
            <input type='password' name='pwd2' id='pwd2'/>
            <span id='pwd2alert'></span>
        </div>
        <div class='item'>
            <label>邮箱</label>
            <input type='text' name='e-mail' id='email'/>
            <span id='emailalert'></span>
        </div>
        <div class='item'>
            <label>学历</label>
            <select  name='xueli' id='xueli'>
                <option value=''>请选择</option>
                <option value='高中'>高中</option>
                <option value='中专'>中专</option>
                <option value='大专'>大专</option>
                <option value='本科'>本科</option>
                <option value='硕士'>硕士</option>
                <option value='博士'>博士</option>
            </select>
            <span id='xuelialert'></span>
        </div>
        <div class='item'>
            <label>爱好:</label> 
            <input type='checkbox' name='like' value='篮球'/>篮球
            <input type='checkbox' name='like' value='足球'/>足球
            <input type='checkbox' name='like' value='网球'/>网球
            <input type='checkbox' name='like' value='羽毛球'>羽毛球
            <input type='checkbox' name='like' value='读书'>读书
            <span id='likealert'></span>
        </div>
        <input type='submit' value='提交表单'/>
        <input type='reset' value='重写'/>
        </form>
    </div>
</body>
<script>
//js光标问题  
//如何组织提交刷新页面
    function checktable(){
    
        var the_form = document.getElementById('theform');
        var username = the_form.username.value;
        var age =the_form.age.value;
        var email =the_form.email.value;
        var pwd =the_form.pwd.value;
        var pwd2 =the_form.pwd2.value;
        var xueli =the_form.xueli.value;
        var like = the_form.like;
        var atpos=email.indexOf("@");
        var dotpos=email.lastIndexOf(".");
        var namealert=document.getElementById('namealert');
        var agealert=document.getElementById('agealert');
        var emailalert=document.getElementById('emailalert');
        var pwdalert=document.getElementById('pwdalert');
        var pwd2alert=document.getElementById('pwd2alert');
        var xuelialert=document.getElementById('xuelialert');
        var likealert=document.getElementById('likealert');
        if(username === null || username ===''){
            //alert('请输入您的姓名')
            namealert.innerHTML ='*请输入您的姓名';
            //the_form.namealert.innerHTML ='请输入您的姓名';
            the_form.username.focus();
            return false;
        }
        else
        {
            namealert.innerHTML ='';
        }
        if(age === null || age ===''){
            //alert('*请输入您的年龄');
            agealert.innerHTML ='*请输入您的年龄';
            the_form.age.focus();
            return false;
        }else{
            if(isNaN(age) || 100<age || age< 1){
            //alert('*输入正确的年龄');
            agealert.innerHTML ='*输入正确的年龄';
            the_form.age.focus();
            return false;
            }
            else
            {
                agealert.innerHTML ='';
            }
        }
        //if()
        // /**
        if(pwd === null || pwd ===''){
            //alert('*请输入密码');
            pwdalert.innerHTML ='*请输入密码';
            the_form.pwd.focus();
            return false;
        }
        else
            {
                pwdalert.innerHTML ='';
            }
        if(pwd2 === null || pwd2 ===''){
            //alert('*请再次输入密码');
            pwd2alert.innerHTML ='*请再次输入密码';
            the_form.pwd2.focus();
            return false;
        }
        else
            {
                pwd2alert.innerHTML ='';
            }
        if(pwd!==pwd2){
        //alert('*密码不一致');
        pwd2alert.innerHTML ='*密码不一致';
        the_form.pwd2.focus();
        return false;
        }
        else
            {
                pwd2alert.innerHTML ='';
            }
        if(!xueli){
            //alert('请输入你的学历');
            xuelialert.innerHTML ='*请输入你的学历';
            return false;
        }
        else
            {
                xuelialert.innerHTML ='';
            }
        // **/
        if(email === null || email===''){
            //alert('*请输入您的邮箱');
            emailalert.innerHTML ='*请输入您的邮箱';
            the_form.email.focus();
            return false;
        }else{
            if(atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
            //alert('*请正确填写您的邮箱');
            emailalert.innerHTML ='*请正确填写您的邮箱';
            the_form.email.focus();
            return false;
            }
            else
            {
                emailalert.innerHTML ='';
            }
        }
        var flag = false ;//标记判断是否选中一个               
            for(var i=0;i<like.length;i++){
                if(like[i].checked){
                        flag = true ;
                        break ;
                 }
             }
             if(!flag){
                //alert("*请最少选择一项！");
                likealert.innerHTML ='*请最少选择一项你的爱好！';
                return false ;
                }
                else
                {
                    likealert.innerHTML ='';
                }
    }
</script>
</html>

黎成诃月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
Javascript的表单验证-提交表单
11-23
如果输入长度不符合要求，它会在对应的帮助文本元素中显示错误信息，并返回`false`，阻止表单提交。相反，如果输入合法，它会清空帮助文本并返回`true`。 `validate_ZipCode`函数则检查邮政编码的长度是否为5位，...
js提交表单及js表单验证
Lee Cheung的专栏
11-08 575
js提交表单及js表单验证功能强大，很多原本需要在服务器端实现的功能，现在通过简单的js代码就可以在客服端实现同样的效果。下面是一些常用的js表单验证代码，供大家参考学习。1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 function test() {if(document.a.b.value.length>50){alert("不能超过50个字
js表单提交数据并进行验证
简单的男孩
01-21 1315
表单提交数据并进行验证 模拟注册填写信息 html页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单提交</title> <style> input[type="text"],input[type="password"]{ width: 250px; } </style> </head&g
表单提交验证
风一样的人
09-24 282
JavaScript代码；； function valid(){ var name = document.getElementById("username").value; var pass = document.getElementById("password").value; if(name==""){ alert("用户名不能为空");
4、表单提交和验证
chaizepeng的博客
07-02 556
1、启用/禁用表单module sbt启动应用时默认就启用了表单，也可以在build.sbt中添加启用libraryDependencies += javaForms，想要移除表单时使用PlayMinimalJava 插件 2、play接收表单数据 play.data中的类可用于处理HTTP表单数据提交和验证，操作提交的表单可以使用play.data.Form类如果想将获取到的表单数据直接封装到对应的实体，则实体字段需要和表单字段对应，并且需要实现get、set方法；也可以不实现get、set方法，直
asp.net表单提交时防重复提交并执行前台的JS验证
01-02
在项目开发中，遇到这样的一个情况，就是用户重复提交。当然这个不能怪用户，只能怪.NET或者服务器反应迟钝……我是这样理解的。 在网上搜了一下，解决方案是不少，...要么重复提交依然存在，要么前台JS验证失效。最后
layui插件表单验证提交触发提交的例子
10-16
我们不仅学习到了基本的表单验证规则定义，还学习到了如何处理表单的提交事件以及如何通过JavaScript触发表单提交。这些技能对于开发具有用户交互性的Web应用程序至关重要。希望本文的内容能够帮助到正在使用layui...
基于jQuery实现表单提交验证
10-25
- jQuery验证代码：此段代码是整个表单验证的核心，它在文档加载完成后被触发，并在输入框失去焦点（blur）和表单提交（submit）时执行验证逻辑。 验证逻辑的工作流程大致如下： - 当一个输入框失去焦点时，会检查...
JavaScript表单即时验证 验证不成功不能提交
12-10
不能再让表单在提交按钮之后才被验证了！你输入的任何信息表单都会即时反应！ 这个JavaScript的关键是onChange()事件，使用onKeyUp()事件完成是不行的，人家没有输入完毕，你就说人家不对，多不友好啊╮(╯▽╰)╭ ...
js表单验证（简单）
11-07
js表单验证（简单）
简单js表单验证大全
03-28
简单js表单验证大全，一看就懂，超级好用，好学
js表单验证提交
李特成的博客
01-03 243
//删除左右两端的空格 function trim(str) { if (str == null) return ""; return str.replace(/(^\s*)|(\s*$)/g, ""); } //显示消息 function Alert(msg) { alert(msg); } //获取id function $_2(id) { retur
js验证表单提交
qq_42058441的博客
12-22 182
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;别人的注册页面，参考&lt;/title&gt; &lt;script&gt; function checkForm(){ //alert("aa")
JS-表单验证提交
DcTbnk的博客
04-02 236
<body> <!-- 表单提交 --> <form action="./01_复习.html"> 注册账号 : <input type="text" maxlength="16"> <span></span> <br> 注册密码 : <input type="...
JS实现验证码功能提交验证
xy_8625的博客
11-04 400
JS实现验证码功能提交验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Verification code</title> </head> <body> <div class="V_code"> <div class="code_show"> <
提交表单input与MD5
weixin_30337251的博客
08-14 435
JavaScript可以以两种方式来处理表单的提交 方式一是通过<form>元素的submit()方法提交一个表单，例如，响应一个<button>的click事件，在JavaScript代码中提交表单： <!-- HTML --> <form id="test-form"> <input type="text" name="te...
angular实现form验证
weixin_30699235的博客
01-17 125
先上效果页面：https://lpdong.github.io/myForm-1/ 其中几个知识点 1、angularJs提供了几个新的type类型： type="password" type="email" type="number" type="url" 2、几个参数含义 ng-required //是否必填，true/false ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值