在表单提交上验证文本框答案

【问题标题】：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>

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 上下文之外，事情可能会变得非常错误:)

标签： javascript jquery validation jquery-ui

【解决方案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, "-");

【讨论】：