Java -- form 表单

最新推荐文章于 2024-05-05 20:27:35 发布

@程序员

最新推荐文章于 2024-05-05 20:27:35 发布

阅读量3.7k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/sky_eyeland/article/details/93890550

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、阻止 Form 表单提交方式一

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form id="form" action="http://localhost:8080/test" method="POST">
    <input type="submit" value="提交" onclick="return upload();"/>
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script>
    function submitMethod(){
        $("#form").ajaxSubmit(function(result) {
            console.log(result)
        });

        return false;
    }
</script>
</html>

2、阻止 Form 表单提交方式二

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form id="form" action="http://localhost:8080/test" method="POST">
    <input type="submit" value="提交"/>
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $(function(){
        $('#form').on('submit', function(){
            submitMethod();
            event.preventDefault();
        })
    })

    function submitMethod(){
        $.ajax({
            type:"get",
            url:"http://localhost:8080/test",
            success: function(result){
                console.log(result)
            }
        });
    }
</script>
</html>

3、Jquery.validate 表单校验（此部分为转发）

转发地址： https://www.cnblogs.com/Leo_wl/p/4842827.html

引入 js 文件

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>

添加规则

$.validator.addMethod(
    "自定义规则名称",
    function(value, element){
        return false 或 true;
    },
    "错误提示信息"
);

校验表单

<script>
//使用 input 的 name 属性进行规则过滤
$(document).ready(function(){
    $("#form").validate({
        rules: {
            username:{
                required: true,
                minlength: 2
            },
            nickname: {
                required: true,
                自定义规则名称: true
            }
        },
        messages:{
            username:{
                required: "用户名不能为空",
                minlength: "用户名的最小长度为2"
            },
            nickname: {
                required: "金额不能为空"
            }
        }
    });
});

完整文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		body{
		    font-family: Microsoft Yahei;
		    font-size: 15px;
		}
		
		fieldset{    width: 680px;    }
		
		legend{    margin-left: 8px;    }
		
		.item{
		    height: 56px;
		    line-height: 36px;
		    margin: 10px;
		}
		
		.item .item-label{
		    float: left;
		    width: 80px;
		    text-align: right;
		}
		
		.item-text{
		    float: left;
		    width: 244px;
		    height: 16px;
		    padding: 9px 25px 9px 5px;
		    margin-left: 10px;
		    border: 1px solid #ccc;
		    overflow: hidden;
		}
		
		.item-select{
		    float: left;
		    height: 34px;
		    border: 1px solid #ccc;
		    margin-left: 10px;
		    font-size: 14px;
		    padding: 6px 0px;
		}
		
		.item-submit{
		    margin-left: 88px;
		}
		
		input.error{
		    border: 1px solid #E6594E;
		}
		
		input.highlight{
		    border: 1px solid #7abd54;
		}
		
		label.error,label.tip{
		    float: left;
		    height: 32px;
		    line-height: 32px;
		    font-size: 14px;
		    text-align: left;
		    margin-left: 5px;
		    padding-left: 20px;
		    color: red;
		    background: url('error.png') no-repeat left center;
		}
		
		label.tip{
		    color: #aaa;
		    background: url('tip.png') no-repeat left center;
		}
		
		label.valid{
		    background: url('valid.png') no-repeat left center;
		    width: 32px;
		}
	</style>
</head>
<body>
	<form action="#" method="post" id="regForm">
	    <fieldset>
	        <legend>jquery-validate表单校验验证</legend>
	        <div class="item">
	            <label for="username" class="item-label">用户名:</label>
	            <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名"
	            autocomplete="off" tip="请输入用户名">
	        </div>
	        <div class="item">
	            <label for="password" class="item-label">密码:</label>
	            <input type="password" id="password" name="password" class="item-text" placeholder="设置密码"
	            tip="长度为6-16个字符">
	        </div>
	        <div class="item">
	            <label for="password" class="item-label">确认密码:</label>
	            <input type="password" name="repassword" class="item-text" placeholder="设置确认密码">
	        </div>
	        <div class="item">
	            <label for="amt" class="item-label">金额:</label>
	            <input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额"
	            tip="交易金额必须大于0，且最多有两位小数">
	        </div>
	        <div class="item">
	            <input type="submit" value="提交" class="item-submit">
	        </div>
	    </fieldset>
	</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>	
<script>
/*******************************插件字段校验*****************************************/
$.validator.addMethod(
    "amtCheck",
    function(value, element){
        return value && /^\d*\.?\d{0,2}$/.test(value);
    },
    "金额必须大于0且小数位数不超过2位"
);
</script>
<script>
$(document).ready(function(){
    $("#regForm").validate({
        rules: {
            username:{
                required: true,
                minlength: 2
            },
            password:{
                required: true,
                minlength: 6,
                maxlength: 16
            },
            repassword:{
                required: true,
                equalTo: "#password"
            },
            amt: {
                required: true,
                amtCheck: true
            }
        },
        messages:{
            username:{
                required: "用户名不能为空",
                minlength: "用户名的最小长度为2"
            },
            password:{
                required: "密码不能为空",
                minlength: "密码长度不能少于6个字符",
                maxlength: "密码长度不能超过16个字符"
            },
            repassword:{
                required: "确认密码不能为空",
                equalTo: "确认密码和密码不一致"
            },
            amt: {
                required: "金额不能为空"
            }
        }
    });
});
</script>
</html>