美文网首页android开发日常总结
Javascript注入表单信息的正确处理方式

Javascript注入表单信息的正确处理方式

作者: aitality | 来源:发表于2023-09-27 09:55 被阅读0次

熟悉JS的都知道,表单注入就是简单的一句话:inputElement.value="test",可是有时候这样设置并没有触发提交按钮状态的校验。只有手动改变输入框内容才能正常提交表单,这个问题困扰了我很久。不过终于解决了。
-_-嘿嘿 -_-

常用注入方式很简单,就下面一句话,缺点呢也很明显,就是无法触发change事件。

inputElement.value="test"

正确的注入方式,看着复杂,但是确保可以触发change事件。

function fill_form_input (element, value){
    const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
    const prototype = Object.getPrototypeOf(element);
    const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;
    if (valueSetter && valueSetter !== prototypeValueSetter) {
        prototypeValueSetter.call(element, value);
    } else {
        valueSetter.call(element, value);
    }
    element.dispatchEvent(new Event('input', { bubbles: true }));
}
//使用例子
fill_form_input(inputElement, "test");

结论

山穷水复疑无路,柳岸花明又一村。 (陶渊明)

相关文章

  • web前端开发中,原来页面表单提交验证这么简单,感觉自己以前都白

    向您的HTML表单添加验证将确保您的用户以正确的格式正确输入数据。过去,验证表单输入需要使用JavaScript插...

  • html表单

    一、表单 表单元素为,表单中可以包含多项表单元素(又称输入域),表单元素之间不能进行嵌套。为了将信息正确提交到服...

  • HTML表单

    一、表单 表单元素为,表单中可以包含多项表单元素(又称输入域),表单元素之间不能进行嵌套。为了将信息正确提交到服...

  • VUE学习----validations(表单验证)

    需要验证的场景 必要的信息不能让用户提交空信息 保证提交信息的格式正确 表单验证控制一些元素的行为,比如信息不正确...

  • Mybatis SQL注入防护与like查询中的通配符

    一、Mybatis SQL注入防护原理 sql注入大家都不陌生,是一种常见的攻击方式,攻击者在界面的表单信息或ur...

  • PHP表单验证实例

    大致逻辑: 1.通过关键词获取表单信息。 2.判断表单,信息是否为空。 3.判断格式是否正确 。 4.输出填写的信...

  • 表单验证

    表单验证:表单验证是一门处理在一个web表单里检查用户提供的信息是否正确的技术,表单验证意味着和用户的交流并引导他...

  • JavaScript 表单

    1.JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成。以下实例代码用于判断...

  • [JavaScript] (Day-18) - 操作表单

    用 JavaScript 操作表单和操作DOM是类似的,因为表单本身也是 DOM 树 用 JavaScript 来...

  • JavaScript 表单验证

    JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输...

网友评论

    本文标题:Javascript注入表单信息的正确处理方式

    本文链接:https://www.haomeiwen.com/subject/hklkbdtx.html