Question

我有一个输入字段，用户应在其中输入系统ID。用户输入系统ID后，应触发验证。如果系统ID有效，那么ajax请求将发送到服务器。如果系统ID无效，则用户应看到此消息。我在这个项目中使用带有Bootstrap 3.3.7的JQuery。这是我的代码示例：

$('#system_id').on('change', getInfo);

function getInfo(e) {
  var fldObj = $(this),
    fldVal = fldObj.val();

  if (fldVal.length > 0 && fldVal.length <= 8 && Number.isInteger(Number(fldObj.val()))) {
    //Send Ajax Request
    console.log('Send request for System ID: ' + fldVal);
  } else {
    // Show message to the user.
    if (fldVal.length === 0) {
      fldObj.parent().removeClass('has-error has-feedback');
      $('#symbol-error').remove();
    } else {
      console.log('Invalid System ID');
      fldObj.parent().addClass('has-error has-feedback').append('<span id="symbol-error" class="glyphicon glyphicon-remove form-control-feedback"></span>');
    }
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="form-group">
    <label class="control-label" for="system_id">System ID:</label>
    <input class="form-control" type="text" name="system_id" id="system_id" value="" placeholder="Enter System ID">
  </div>
</div>

到目前为止，我的逻辑还不错，我正在检查用户输入值是否为整数，并且它是否在1到8之间。如果可能，我想在输入字段中显示该消息并带有警报（引导3）。如果有人知道该怎么做，或者有更好的方法请告诉我。谢谢。

Answer 1

您可以在该行之后添加到脚本 console.log（'无效的系统ID'）：

import { Injectable } from '@angular/core';

import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';

@Injectable({
  providedIn: 'root'
})
export class DatabaseService {

  private db: SQLiteObject;
  results = [];

  constructor(private sqlite: SQLite) { }

  public createDatabase(): void {
    this.sqlite.create({
      name: 'ocp_fuits_database.db',
      location: 'default'
    })
    .then((db: SQLiteObject) => {
      console.log('Database created');
      this.db = db;
      this.createTables();
    })
    .catch(e => console.log(e));
  }

  private createTables(): void {
    this.db.executeSql('CREATE TABLE IF NOT EXISTS `users` (`idUser` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, `username` TEXT NOT NULL, `password` TEXT NOT NULL)', [])
    .then(() => {
      console.log('Table users created');
    })
    .catch(e => console.log(e));
  }

  public saveUser(username: string, password: string): void {
    this.db.executeSql('INSERT INTO users (username, password) VALUES (\'' + username + '\', \'' + password + '\')', [])
    .then((db: SQLiteObject) => {
      console.log(username + password + ' saved');
    })
    .catch(e => console.log(e));
    console.log('save save');
  }

  public getUser(username: string): boolean {
    let b: boolean = false;
    this.db.executeSql('select * from users where username like %' + username + '%', [])
    .then((result) => {
      if (result.rows.length > 0) {
        b = true;
      }
    })
    .catch (e => console.log(e));
    
    return b;
  }

  public getData() {
    this.db.executeSql('select * from users', [])
			.then((data) => {
				for (let i = 0; i < data.rows.length; i++) {
          let item = data.rows.item(i);
          this.results.push(item);
        }
			})
			.catch(e => {
				console.log(e);
    })
    return this.results;
  }
}

第一行将为输入着色。
第二行将插入您的消息。

如何验证更改时的输入字段并向用户显示消息？

1 个答案: