在表单提交上验证文本框

Posted 2023-05-09

【中文标题】在表单提交上验证文本框

【英文标题】：Validating TextBox on form submit

【发布时间】：2018-11-17 03:27:50

【问题描述】：

我有文本框，我想在使用 jquery 提交表单时用 - 替换文本框的值 %。但不知道我该怎么做。

这是我的 html

<form [formGroup]="form" id="form" (submit)="addDetails();form.reset()" class="form-style-9" ngNativeValidate>
    <div class="form-group">
        <div class="col-sm-4">
            <label for="username">User Name</label></div>
            <div class="col-sm-8"><input type="text" id="username" class="form-control"
                placeholder="Please Enter User Name" formControlName="username" required="true">

            </div>
            <input type="hidden" id="usernameX" name="username" />
        </div>
        <input type="submit">
    </form>

JS

var doReplace = function(string)
    return string.replace(/%/g, "-");

var $usernameX = $('#usernameX');
$("#form").on("submit", function(e) 
$usernameX.val(doReplace($('#username').val()));
e.preventDefault();
);

【问题讨论】：

为什么这个问题被标记为 Angular？ Angular 和 jQuery 是天壤之别！

因为我同时使用了 angular 和 jquery。如果我没记错的话，我们可以一起使用。

虽然可以同时使用 jQuery 和 Angular，但你真的不应该。

^^^ 这个。你真的不应该在 Angular 中使用 jQuery。 Angular 保持对 DOM 的控制，一旦你引入 jQuery，你就在 Angular 上下文之外，事情可能会变得非常错误:)

【参考方案1】：

你可以这样做。但是你不需要 jQuery 来做这个：

<form [formGroup]="form" id="form" (submit)="onSubmit()" class="form-style-9" ngNativeValidate>
  <div class="form-group">
    <div class="col-sm-4">
      <label for="username">User Name</label>
    </div>
    <div class="col-sm-8">
      <input type="text" id="username" class="form-control" placeholder="Please Enter User Name" formControlName="username"
        required="true">

    </div>
    <input type="hidden" id="usernameX" name="username" />
  </div>
  <input type="submit">
</form>

并在component.ts中添加onSubmit()：

public onSubmit(): void 
 this.addDetails();
 const value = this.form.get('username').value.replace(new RegExp('%'), '-');'
 this.form.reset();

【讨论】：

它没有替代。

调试时显示已替换，但提交时未替换。

替换值后放一个控制台日志看看。您如何从要提交的表单中获取值？

它只替换 1% 如果我有 %% 会怎样

为此使用正则表达式。您可以在here

中测试您的正则表达式

【参考方案2】：

    var myStr = 'replace_underscore_by_minus';
    var newStr = myStr.replace(/_/g, "-");