js设置完input的value后值会变回去

当我用js设置Formily里面的input组件的值时，修改完点一下网页值就变回去了

img

我尝试过设置完后添加了几个常见的触发事件，但是也没啥用，应该是双向绑定的，像这种应该怎么解决

img

具体可以在进这里试一下 https://formilyjs.org/guide/advanced/validate

【相关推荐】



  • 你可以参考下这篇文章：validate.js 正则表达完成input框的各种判断
  • 除此之外, 这篇博客: 个人常用的工具中的 1.validate.js 各种输入框的验证工具 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • 前提:HTML 必须先引入jquery。如：
      <script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
    • 以表单提交为例。
        <form id="register_form" method="post">
    <div class="item">
        <input placeholder="请输入用户名" class="itxt" name="username" id="username" type="text">
    </div>

    <div class="item item2">
        <input placeholder="请输入密码" class="itxt" name="password" id="password"
        type="password">
    </div>

    <div class="item item2">
        <input placeholder="确认密码" class="itxt" name="truePassword" id="truePassword"
        type="password">
    </div>

    <div class="item item2">
        <input class="itxt" username="sex" id="sex" type="radio" value="0" style="width: 20px;">男&nbsp;&nbsp;&nbsp;
        <input class="itxt" username="sex" id="sex2" type="radio" value="1" style="width: 20px;">女
    </div>

    <div class="item">
        <input placeholder="请输入手机号码" class="itxt" name="telephone" id="telephone" type="text">
    </div>

    <div class="item">
        <input placeholder="请输入邮箱" class="itxt" name="email" id="email" type="text">
    </div>

    <div class="item items">
        <div style="display: block" id="verify">
            <input id="verifyCodeText" name="verifyCodeText" class="itxt itxt_yzm onfocustxt" username="mobile_code"
                   id="mobile_code" type="text">

            <a href="javascript:exchangeVerifyCode();" id="hrefVerifyCode1" style="margin-left: 18px;">
                <img src="${pageContext.request.contextPath}/verifyCodeServlet" id="verifyCode">
            </a>
        </div>
        <div class="err_box">
            <div class="err_msg2 msg" style="display: none;" id="errorMsg"></div>
        </div>
    </div>

    <div class="item item5">
        <div class="login-btn">
            <input type="submit" id="registersubmit" value="立即注册">
        </div>
        <div class="agree">
            <input class="jdcheckbox" tabindex="8" name="agree" id="agree" type="checkbox">
            <label>同意快乐购<span><a href="" target="_blank">《用户服务协议》</a></span>条款</label>
        </div>
    </div>
</form>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
	// 单击验证码刷新  具体代码可见 验证码的生成至页面 章节
    function exchangeVerifyCode() {
        $("#verifyCode").attr('src', "${pageContext.request.contextPath}/verifyCodeServlet?yyy=" + new Date().getTime());
    }
	//添加自定义的验证方式 
	// 第一个参数： isMobile为验证的名称 第二个参数： function ()处理方式   第三个参数：提示消息
    $.validator.addMethod("isMobile", function (value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
    $(function () {
    	//表单验证实现方式
        $("#register_form").validate({
        	//验证 如果改验证码出错  则会显示下面message对象中对应的消息
            rules: {
            	//验证输入框id为username 的输入框
                username: {
                	//验证输入必须存在  
                    required: true, 
                    //验证输入最小长度
                    minlength: 2,
                    //验证输入最大长度
                     maxlength: 6,
                     //发送ajax异步请求 验证用户名是否存在
                    remote: {
                    	//请求方式
                        type: "post",
                        //ajax请求的路径
                        url: "${pageContext.request.contextPath}/judgeServlet",
                        data: {
                        	//传送的参数
                            username: $("#username").value
                        }
                    }/* ajax调用后台功能*/
                },
               	//验证输入框id为password的输入框
                password: {
                	required: true,
                	//验证输入长度在 6 - 20 之间
                 	rangelength: [6, 20]
                 },
                 //验证输入框id为truePassword的输入框
                truePassword: {
                    // 验证输入 与id为password输入框的值相同
                	equalTo: "#password"
                },
                //验证输入框id为email的输入框
                email: {
                    required: true, 
                     // 验证输入 与是否是邮件的格式
                    email: true,
                     //发送ajax异步请求 验证邮箱是否存在
                    remote: {
                        type: "post", //请求的方式
                        url: "${pageContext.request.contextPath}/judgeServlet",  // 请求的url路径
                        data: { //传递的参数
                            email: $("#email").value
                        }
                    }/* ajax调用后台功能*/
                },
                 //验证输入框id为telephone的输入框
                telephone: {
                	required: true,
                	//验证输入是否是纯数字
                	number: true,
                	//使用自定义的验证方式 判断是否是正确的手机号码
                	isMobile: true,
                	rangelength: [11, 11]
                },
                //验证输入框id为verifyCodeText的输入框
                verifyCodeText: {
                    required: true, rangelength: [4, 4],
                     //发送ajax异步请求 验证验证码是否正确
                    remote: {
                        type: "post", //请求的方式
                        url: "${pageContext.request.contextPath}/judgeServlet",  // 请求的url路径
                        data: { //传递的参数
                            verifyCodeText: $("#verifyCodeText").value
                        }
                    }/* ajax调用后台功能*/
                },
                sex: {required: true}
            },
            //验证未成功的提示消息   如果某项未成功对应的某项就会显示错误消息。如： username输入框未输入，则会显示 username输入框对应的required的提示消息
            messages: {
                username: {
                    required: "用户名必填",
                    minlength: "用户名至少2位",
                    maxlength: "用户名不能超过6位",
                    remote: "用户已存在"
                },
                password: {
                    required: "密码必填",
                    digits: "密码必须是整数",
                    rangelength: "密码6位到20位"
                },
                truePassword: {
                    equalTo: "两次密码不一致"
                },
                email: {
                    required: "邮箱必填",
                    email: "邮箱格式错误",
                    remote: "邮箱已存在"
                },
                telephone: {
                    required: "手机号码必填",
                    number: "必须为数字",
                    rangelength: "手机号码长度为11位",
                    isMobile: "请输入正确的手机格式"
                },
                verifyCodeText: {
                    required: "验证码必填",
                    rangelength: "验证码长度为4位",
                    remote: "验证码错误"
                },
                sex: {
                    required: "请选择性别"
                }
            },
        });
    });
</script>
    • 效果如下
      在这里插入图片描述

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^