jquery-validate动态添加表单元素动态验证

最新推荐文章于 2024-10-03 10:12:38 发布

同同

最新推荐文章于 2024-10-03 10:12:38 发布

阅读量6.3k

点赞数 3

文章标签： jquery validate

本文链接：https://blog.csdn.net/lytlx/article/details/51178823

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>index</title>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/jquery-validate/dist/jquery.validate.min.js"></script>

</head>
<body>
    <form id="testform" action="#">
        <input type="text" name="name" id="name" value="" /><br/>
        <input type="submit" value="提交" id="submit">
        <input type="button" value="添加" id="add"><br/>

    </form>
    <script>
        $(function() {
            $('#testform').validate({
                rules:{
                    name:"required"
                },
                messages:{
                    name:"请输入姓名"
                },
                submitHandler:function(form) {
                    console.log('test');
                    return false;
                }
            });

            var i = 0;
            $('#add').on('click', function(e) {
                i++;
                $('#testform').append('<input type="text" name="_' + i + '" id="_' + i + '" value="" /><br/>')

                $('#_' + i).rules('add', {
                    required:true,
                    messages:{
                        required:"newT必输"
                    }
                });
            });
        });
    </script>
</body>
</html>